javascript - 动态更改 slideToggle 上的 div 高度

Question

这很难解释，请耐心等待。

我的网页上有一列分为 2 个面板/部分。当用户最小化面板时，我希望辅助面板展开以占用剩余空间。

当面板 1 最小化时，列表隐藏，面板 2 的标题将直接向上移动到面板 1 的下方，并且列表将扩展以填充下面的其余列空间。

当面板 2 最小化时，里面的列表会隐藏，面板 2 的标题将直接转到页面底部，面板 1 的列表将展开以适应列的其余部分

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

通用解决方案 Fiddle

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();