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

Posted 2023-03-06

【中文标题】如何并排展开和折叠三个div？

【英文标题】：How to expand and collapse three div's side by side?

【发布时间】：2017-05-03 01:13:09

【问题描述】：

$(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 请帮助我如何在 angularjs 中做到这一点。

在普通模式下示例：-

会是这样的。

如果我展开 center div 它需要像这样的例子：-

如果我展开最后一个 div，它需要像这样的示例：-

谢谢..

【问题讨论】：

我为 2 个 div 完成了，但我为 3 个 div 做了努力

我把示例代码分享给了两个div

你能为此制作一个小提琴吗？

你想在单个按钮中实现这一点还是点击div？

看这个：codepen.io/vishnuprasad/pen/MbZqgW

【参考方案1】：

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

压缩和展开状态下的宽度以百分比表示，您可以根据需要在 css 中更改它们。我还添加了transition 属性以实现平稳运行。

这是pen。

$("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>

【讨论】：

如何重置？恢复正常位置？

抱歉没有早点想到，您能等五分钟吗

【参考方案2】：

如果您只想在 div 之间切换，请执行以下操作。

// varible for holding div index
var i = 0,
  // cache divs
  $div = $('.div');;

// bind click event handler
$('.toggle').click(function() 
  $div
  // remove both class from all elements
    .removeClass('active nonactive')
    // get element by index
    .eq(i)
    // add active class
    .addClass('active')
    // get siblings
    .siblings()
    // add nonactive class
    .addClass('nonactive');
  // update index 
  i = ++i % $div.length;
)

.div 
  height: 300px;
  width: 30%;
  border: solid 1px black;
  display: inline-block

.active 
  width: 75%;

.nonactive 
  width: 10%;

.active,
.nonactive 
  -webkit-transition: width 1s ease-in-out;
  -moz-transition: width 1s ease-in-out;
  -o-transition: width 1s ease-in-out;
  transition: width 1s ease-in-out;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle">toggle</button>
<br>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>

---

或者，如果您想在单击 div 内的按钮时进行切换，请执行以下操作。

$('.toggle').click(function() 
  $(this)
    // get div 
    .parent()
    // remove nonactive class from clicked element
    .removeClass('nonactive')
    // toggle active class
    .toggleClass('active')
    // get sibling divs
    .siblings()
    // remove active class from siblings
    .removeClass('active')
    // toggle nonactive class based on the clicked element 
    .toggleClass('nonactive', $(this).parent().is('.active'));
)

.div 
  height: 300px;
  width: 30%;
  border: solid 1px black;
  display: inline-block

.active 
  width: 75%;

.nonactive 
  width: 10%;

.div,
.active,
.nonactive 
  -webkit-transition: width 1s ease-in-out;
  -moz-transition: width 1s ease-in-out;
  -o-transition: width 1s ease-in-out;
  transition: width 1s ease-in-out;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="div">
    <button class="toggle">toggle</button>
  </div>
  <div class="div">
    <button class="toggle">toggle</button>
  </div>
  <div class="div">
    <button class="toggle">toggle</button>
  </div>
</div>

【参考方案3】：

    <div id="header">HEADER
        <input type="button" data-name="show" value="Toggle" id="toggle">
    </div>
    <div id="maincont">
        <div id="map" class="active">MAP</div>
        <div id="sidebar" class="inactive">SIDEBAR</div>
        <div id="sidebar1" class="inactive">SIDEBAR1</div>
    </div>

脚本：

    $(document).ready(function ()      
            $("#toggle").click(function () 

                        var $div = $('#maincont').find(".active");
                        $div.removeClass('active').addClass("inactive").next().addClass("active");      

                        $('#maincont').find(".inactive").animate(
                            width: '10%'
                        )

                        $('#maincont').find(".active").animate(
                            width: '79%'
                        );           

             );

    );

css.

         html, body 
            width:100%;
            height: 100%;
        
        #header 
            width: 100%;
            height: 100px;
            float: left;
            border: 1px solid;
        
        #map   
            height: 80%;
            float: left;
            border: 1px solid;
        
        .active
          width:78%;
           float: left;
           height: 100px;
        
        .inactive
          width:10%;
           float: left;
           border: 1px solid;
            height: 100px;
        
        #sidebar    
            height: 80%;
            float: left;

        
        #toggle 
            width: 10%;
            height: 40%;
            margin-right: 6.5%;
            margin-top: 3.5%;
            float: right;
        

fiddle link

【参考方案4】：

由于您使用 angularjs 标记了您的问题，因此这里有一个没有花哨 CSS 的简单解决方案：

假设你有一些描述控制器中面板/div的对象数组，例如

$scope.panels = [
    title: "One",
    expanded: true
  , 
    title: "Two"
  , 
    title: "Three"
  ];

expanded 标志只跟踪实际展开的面板。默认是第一个。

然后当你点击一个面板时，这个函数将标志设置为选定的面板：

  $scope.expandPanel = function(panel) 
     $scope.panels.forEach(p => p.expanded = false);
     panel.expanded = true;
  

然后您在ng-repeat 循环中显示所有内容，其中关键是根据expanded 标志和ng-class 动态设置类：

<div class="panel" 
     ng-class="'expanded': panel.expanded, 'reduced': !panel.expanded" 
     ng-repeat="panel in panels" ng-click="expandPanel(panel)">
  <span>panel.title</span>
</div> 

看到它live with this plunker。

注意：.panel、.expanded 和 .reduced 类在 plunker css 文件中定义。