Question

＆＃13;

$(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')
        }
    });
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

在正常模式下示例： -

就是这样。

如果我扩展中心div，它需要像这样的例子： -

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

谢谢..

Answer 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>

Answer 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>

Answer 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

Answer 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文件中定义。

如何并排展开三个div？

4 个答案: