如何展開和摺疊三個div並排？

Question

$(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中做到這一點。

在正常模式下實施例： -

這將是這樣的。

如果我擴大中心的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

如果你只是想切換divs然後做這樣的事情。

// 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文件中定義的。