如何并排展开和折叠三个div？

苏雷什B

$(document).ready(function () {
    $("#toggle").click(function () {
        if ($(this).data('name') == 'show') {
            $("#sidebar").animate({
                width: '10%'
            }).hide()
            $("#map").animate({
                width: '89%'
            });
            $(this).data('name', 'hide')
        } else {
            $("#sidebar").animate({
                width: '29%'
            }).show()
            $("#map").animate({
                width: '70%'
            });
            $(this).data('name', 'show')
        }
    });
});

html, body {
    width:100%;
    height: 100%;
}
#header {
    width: 100%;
    height: 20%;
    float: left;
    border: 1px solid;
}
#map {
    width: 80%;
    height: 80%;
    float: left;
    border: 1px solid;
}
#sidebar {
    width: 19%;
    height: 80%;
    float: left;
    border: 1px solid;
}
#toggle {
    width: 10%;
    height: 40%;
    margin-right: 6.5%;
    margin-top: 3.5%;
    float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">HEADER
    <input type="button" data-name="show" value="Toggle" id="toggle">
</div>
<div id="map">MAP</div>
<div id="sidebar">SIDEBAR</div>

我是一个初学者angularjs，jquery和css。我要创建三个div并排切换的div。请帮助我如何在angularjs中做到这一点。

在正常模式下示例：-

会是这样。

如果我扩展center div，则需要像以下示例：-

如果我扩展上一个div，则需要像以下示例：-

谢谢..

ab29007

尝试这个。所有div都可以按任何顺序扩展。要切换回正常位置，请再次点击展开的div。

压缩和扩展状态下的宽度以百分比表示，您可以根据需要在CSS中进行更改。我还添加了transition用于平稳运行的属性。

这是一支笔。

$("a.expansion-btn").click(function (){
  classes = this.className;
  var divNumber = classes.slice(-1);
  var toGetId = "#div-"+divNumber;
  if ($(toGetId).hasClass("expanded-div")){
   $(".normal-div").removeClass("compressed-div expanded-div");
  }
  else{
   $(".normal-div").removeClass("compressed-div expanded-div").addClass("compressed-div");;
   $(toGetId).removeClass("compressed-div").addClass("expanded-div");    
  }  
});

*{
  box-sizing:border-box;
}
.container{
  margin:0;
  padding:0;
  width:100%;
  height:400px;
}
.normal-div{
  width:33.33%;
  height:100%;
  position:relative;
  border:2px solid black;
  float:left;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.expanded-div{
  width:80%;
}
.compressed-div{
  width:10%;
}
#div-1{
  background-color:green;
}
#div-2{
  background-color:red;
}
#div-3{
  background-color:blue;
}
a.expansion-btn{
  position:absolute;
  top:10px;
  right:10px;
  font-weight:bold;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="normal-div" id="div-1">
    <a class="expansion-btn exp-1">click</a>
  </div>
  <div class="normal-div" id="div-2">
    <a class="expansion-btn exp-2">click</a>
  </div>
  <div class="normal-div" id="div-3">
    <a class="expansion-btn exp-3">click</a>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2020-10-29

我来说两句

0 条评论

登录后参与评论

如何并排展开和折叠三个div？

如何并排展开和折叠三个div？

Google Chrome浏览器扩展manifest.json文件

C-交换单链列表中的第一个和最后一个元素

如何将gdb调试器置于nohup下？

ASP.NET Core中的单元测试标签助手-填充标签公共属性

TEST，TEST_F和TEST_P有什么区别？

VS Code Remote SSH：如何在断开连接后让进程保持运行至完成状态？

如何将ssh密码保存到vscode？

Logstash Elastic Cloud 401未经授权的错误

无法在ServerXMLHTTP请求中设置自定义超时

如何在PrestoSQL中计算中位数？

无法解析“ $ {workspaceFolder}”。请打开一个文件夹。在Visual Studio Code上

如何合并两个不同的JSON（使用python）

react / typescript：参数“ props”隐式具有“ any”类型错误

在Alpine linux的哪里设置系统默认环境变量？

Difference between @Inject and @ValueMapValue annotations

如何在pytorch中对矩阵的每一行中的值进行重复数据删除？

带有Python扩展的VSCode，2019年4月-“正在加载Python扩展...”

如何避免VSCode中的“导入路径不能以.ts扩展名结尾”错误？

TypeScript：隐式具有“ any”类型，因为类型“ string”的表达式不能用于索引类型

如何降级Google Colab的Torch版本

如何在树莓派4B上启用对H.264编码的硬件支持