在slideToggle上動態更改div高度

Question

這很難解釋所以請耐心等待。

我的網頁上有一欄分為2個面板/部分。 當用戶最小化面板時，我希望輔助面板展開以占用剩余空間。

當面板1最小化時，列表隱藏，面板2標題將直接向下移動到面板1下方，列表將展開以填充下面的其余列空間。

當面板2最小化時，隱藏內的列表，面板2標題將直接進入頁面底部，面板1列表將展開以適應列的其余部分

小提琴： http ： //jsfiddle.net/mL9RG/

我可以在部分內部獲取slideToggle沒有問題。 我還可以添加一個固定的CSS高度動畫來實現我正在尋找的東西。 我沒有成功使用％來使其響應。

HTML

<div id="wrapper">
    <div id="section1">
        <h2 id="crossbar1">Section 1<span id="plus2">+/-</span></h2>
        <ul id="list1">
            <li>Stuff</li>
            <li>Stuff</li>
            <li>Stuff</li>
            <li>Stuff</li>
        </ul>
    </div>
    <div id="section2">
        <h2 id="crossbar2">Section 2 <span id="plus2">+/-</span></h2>
        <ul id="list2">
            <li>Stuff</li>
            <li>More Stuff</li>
            <li>Stuff</li>
        </ul>
    </div>
</div>

CSS

#wrapper { width: 200px; height: 400px; margin: 0 auto; background-color: #eaeaea; }
ul { margin: 0; padding: 0; list-style: none; display: block; }
h2 { margin: 0; padding: 5px 0; background-color: #d8d8d8; position: relative; }
h2 span { position: absolute; right: 10px; font-size: 15px; top: 10px; cursor: pointer }
#section1 { 
    height: 50%; width: 100%; background-color: blue;
    box-sizing: border-box;
}
#section2 {
    height: 50%; width: 100%; background-color: green;
}

jQuery的

$('#crossbar1').click(function(){
   $('#list1').slideToggle(); 
});
$('#crossbar2').click(function(){
   $('#list2').slideToggle(); 
});

Answer 1

通用解決方案小提琴

HTML

<div class="wrapper">
<div class="section expanded">
    <h2>Section 1<span class="toggle">+/-</span></h2>
    <ul class="list">
        <li>Stuff</li>
        <li>Stuff</li>
        <li>Stuff</li>
        <li>Stuff</li>
    </ul>
</div>
<div class="section expanded">
    <h2>Section 2<span class="toggle">+/-</span></h2>
    <ul class="list">
        <li>Stuff</li>
        <li>Stuff</li>
        <li>Stuff</li>
        <li>Stuff</li>
    </ul>
</div>
<div class="section expanded">
    <h2>Section 3<span class="toggle">+/-</span></h2>
    <ul class="list">
        <li>Stuff</li>
        <li>Stuff</li>
        <li>Stuff</li>
        <li>Stuff</li>
    </ul>
</div>

CSS

.wrapper {
    width: 200px; 
    height: 400px; 
    margin: 0 auto; 
    background-color: #eaeaea; 
    position: relative;
}


ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    display: block; 
}

h2 { 
    margin: 0; 
    padding: 0; 
    height:38px;
    line-height:38px; 
    background-color: #d8d8d8; 
    position: relative; 
}

h2 span { 
    position: absolute; 
    right: 10px; 
    font-size: 15px; 
    top: 0px; 
    cursor: pointer 
}

.section {
    position: relative;
    overflow:hidden;
}

腳本

function recalc(){
    var jq_parent = $(this).closest('.section');
    jq_parent.attr('class', 'section ' + (jq_parent.hasClass('expanded') ? 
                   'collapsed' : 'expanded'));
    var num = $('.expanded').length;
    if (num > 0) {
        var h = (400 - (38 * $('.collapsed').length) )/ num;
        $('.collapsed').animate({height:'38px'});
        $('.expanded').animate({height: h + 'px' });
    }
}
$('.toggle').click(recalc);
recalc();

Answer 2

HTML

<div class="wrapper">
  <div class="wrapper-item">
    Section 1
    <div class="type"></div>
  </div>
  <div class="data">
      <ul id="list1">
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
      </ul>
  </div>
   <div class="wrapper-item">
    Section 2
     <div class="type"></div>
  </div>
  <div class="data">
      <ul id="list1">
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
      </ul>
  </div>

CSS

body
{
font-family: Arial, Helvetica, sans-serif;
}
.wrapper
{
  width:100%;
  max-height:300px;
  margin:20px auto;
}
.wrapper-item {
font-size: 1em;
margin: 0 10px 0 10px;
padding: 10px;
height: 20px;
background: #f2f2f2;
border-bottom:1px solid #ccc;
color: #000;
cursor:pointer;
}

.wrapper-item.open
{
background:#14ad40;
border-bottom:0px;
color:#fff;
}
.wrapper-item.open .type {
float: right;
background: url('http://vivekarora.com/images/minus.png') center no-repeat;
padding: 10px;
}

.wrapper-item .type {
float: right;
background: url('http://vivekarora.com/images/plus.png') center no-repeat;
padding: 10px;
}

div.data {
background: #fff;
margin: 0 10px 0 10px;
padding: 10px;
border:1px solid #ccc;
font-size: .8em;
line-height: 140%;
display:none;
}

JS

$(function($) {
  var allWrappers = $('.wrapper div.data');
  var allWrapperItems = $('.wrapper .wrapper-item');
  $('.wrapper > .wrapper-item').click(function() {
    if($(this).hasClass('open'))
    {
      $(this).removeClass('open');
      $(this).next().slideUp("slow");
    }
    else
    {
    allWrappers.slideUp("slow");
    allWrapperItems.removeClass('open');
    $(this).addClass('open');
    $(this).next().slideDown("slow");
    return false;
    }
  });
});

DEMO

Answer 3

嘗試這種方法來實現你想要的。

我用過class而不是id。 它會使代碼很短。

HTML

<div id="wrapper">
    <div class="section">
        <h2 class="crossbar">Section 1<span id="plus2">+/-</span></h2>
        <ul id="list1">
            <li>Stuff</li>
            <li>Stuff</li>
            <li>Stuff</li>
            <li>Stuff</li>
        </ul>
    </div>
    <div class="section">
        <h2 class="crossbar">Section 2 <span id="plus2">+/-</span></h2>
        <ul id="list2">
            <li>Stuff</li>
            <li>More Stuff</li>
            <li>Stuff</li>
        </ul>
    </div>
</div>

CSS

#wrapper { width: 200px; height: 400px; margin: 0 auto; background-color: #eaeaea; }
ul { margin: 0; padding: 0; list-style: none; display: block; }
h2 { margin: 0; padding: 5px 0; background-color: #d8d8d8; position: relative; }
h2 span { position: absolute; right: 10px; font-size: 15px; top: 10px; cursor: pointer }
.section{ 
   width: 100%; 
    box-sizing: border-box;
}
#list1{ height: 150px; background-color: blue;}
#list2{ height: 150px; background-color: green;}

腳本

$('h2.crossbar').on('click', function(){
    $(this).next('ul').slideToggle();
}); 

小提琴演示

Answer 4

聽起來你正在描述Bootstrap的崩潰插件實現的行為，這是正確的嗎？ 請參閱此處的示例： http ： //getbootstrap.com/javascript/#collapse

Answer 5

我建議你使用jQuery的.toggleClass()函數。

如果你再增加兩個課程：

.open {
    height: 50%;    
}

.fullOpen {
    height: 100%;   
}

然后，您可以按如下方式控制內容框的狀態：

$('#crossbar1').click(function(){
   $("#one").toggleClass('open', 100);
   $('#bodyOne').slideToggle(100); 
   $("#two").toggleClass('fullOpen', 100);   
});

$('#crossbar2').click(function(){
   $("#two").toggleClass('open', 100);
   $('#bodyTwo').slideToggle(100); 
   $("#one").toggleClass('fullOpen', 100);    
});

這完美無缺，完全按照您的意思行事。

DEMO

您還可以通過明確跟蹤框的狀態來實現它：

演示2

希望這可以幫助你！

Answer 6

你想使用flexboxes

我假設您使用div#section來創建效果，並且您不需要它們，這為DOM提供了更清晰的標記和更少的節點：

<div id="wrapper">
    <h2 id="crossbar1">Section 1<span id="plus1">+/-</span></h2>
    <ul id="list1">
        <li>Stuff</li>
        <li>Stuff</li>
        <li>Stuff</li>
        <li>Stuff</li>
    </ul>
    <h2 id="crossbar2">Section 2 <span id="plus2">+/-</span></h2>
    <ul id="list2">
        <li>Stuff</li>
        <li>More Stuff</li>
        <li>Stuff</li>
    </ul>
</div>

現在我們將#wrapper設置為flexbox（通過display: flex ），並說我們希望以列方式（ flex-direction: column ）使用它，這意味着內容將垂直展開。 此外，我們將列表上的flex-grow設置為1 ，以便在必要時增長：

#wrapper { display: flex; flex-flow: column nowrap; 
           width: 200px; height: 400px; margin: 0 auto; background-color: #eaeaea; }
#wrapper > ul { flex-grow:1; margin: 0; padding: 0; list-style: none; }

/* your old rules */
h2 { margin: 0; padding: 5px 0; background-color: #d8d8d8; position: relative; }
h2 span { position: absolute; right: 10px; font-size: 15px; top: 10px; cursor: pointer }

#list1{background-color: blue}
#list2{background-color: green}

對於相互行為，我選擇了一種易於擴展到更多部分的方法：

var addToToggleGroup = (function(){
    var toggleState = []; // holds the state of the elements in the group

    var toggle = function(i, target) {
        toggleState[i] = !toggleState[i];

        // prevent that we toggle this element if it is the last

        if(toggleState.every(function(el){ return !el;})){
            toggleState[i] = !toggleState[i];
            return;
        } else {
            $(target).slideToggle();
        }
    }

    return function (el, target){
        var i = toggleState.length;
        toggleState.push(true);
        $(el).on("click", function(){
            toggle(i, target);
        })
    }
})();

// add the elements to the toggle group. We can use jQuery selectors here
addToToggleGroup("#crossbar1","#list1");
addToToggleGroup("#crossbar2","#list2");

這就是它（ 小提琴 ）。

參考

• CSS技巧：flexbox指南

Answer 7

通過動畫高度來看看我的解決方案。 行為應該與您的圖像類似。

修改后的CSS：

#wrapper { 
    width: 200px; height: 400px; margin: 0 auto; background-color: #eaeaea; 
    position: relative;
}
ul { margin: 0; padding: 0; list-style: none; display: block; }
h2 { margin: 0; padding: 5px 0; background-color: #d8d8d8; position: relative; }
h2 span { position: absolute; right: 10px; font-size: 15px; top: 10px; cursor: pointer }

#section1, #section2{
    box-sizing: border-box;
    width: 100%;
    height: 50%;
}

#section1 { 
    background-color: blue;
}
#section2 {
    background-color: green;
} 

修改過的js

$('#crossbar1').click(function(){
    if($('#list1').is(':hidden')){
        if($('#list2').is(':hidden')){
            $( "#section1" ).animate({height: "362px"});
            $( "#section2" ).animate({height: "37px"});
        }else{   
            $( "#section1" ).animate({height: "50%"}); 
            $( "#section2" ).animate({height: "50%"});    
        } 
    }else{   
        if($('#list1').is(':hidden')){
            $( "#section1" ).animate({height: "362px"});
        }else{   
            $( "#section1" ).animate({height: "37px"}); 
            $( "#section2" ).animate({height: "362px"});     
        }  
    }
    $('#list1').slideToggle(); 
});
$('#crossbar2').click(function(){
    if($('#list2').is(':hidden')){  
        if($('#list1').is(':hidden')){
            $( "#section2" ).animate({height: "362px"});
        }else{   
            $( "#section2" ).animate({height: "50%"});
            $( "#section1" ).animate({height: "50%"});     
        } 
    }else{   
        if($('#list1').is(':hidden')){
            $( "#section2" ).animate({height: "362px"});
        }else{   
            $( "#section2" ).animate({height: "37px"}); 
            $( "#section1" ).animate({height: "362px"});     
        }  
    }
    $('#list2').slideToggle(); 
});

查看jsFiddle上的演示 。 希望這就是你要找的東西。

編輯：關閉section2和打開和關閉section1的小錯誤修正。 （更新了jsFiddle-Demo）