带有额外填充的 jQuery 手风琴答案

【问题标题】：jQuery accodion with additional padding带有额外填充的 jQuery 手风琴
【发布时间】：2014-03-20 02:55:45
【问题描述】：

我有这个运行良好的脚本：

Javascript

$('.trigger').not('.trigger_active').next('.toggle_container').hide();
$('.trigger').click( function() {
    var trig = $(this);
    if ( trig.hasClass('trigger_active') ) {
        trig.next('.toggle_container').slideToggle('slow');
        trig.removeClass('trigger_active');
    } else {
        $('.trigger_active').next('.toggle_container').slideToggle('slow');
        $('.trigger_active').removeClass('trigger_active');
        trig.next('.toggle_container').slideToggle('slow');
        trig.addClass('trigger_active');
    };
    return false;
});

我的 html 结构如下所示：

HTML

<div class="group">
<div class="item1">
<div class="trigger"></div>
<div class="trigger_container"></div>
</div>
<div class="item2">
<div class="trigger"></div>
<div class="trigger_container"></div>
</div>
<div class="item3">
<div class="trigger"></div>
<div class="trigger_container"></div>
</div>
<div class="item4">
<div class="trigger"></div>
<div class="trigger_container"></div>
</div>
</div>
<div class="group">
<div class="item5">
<div class="trigger"></div>
<div class="trigger_container"></div>
</div>
<div class="item6">
<div class="trigger"></div>
<div class="trigger_container"></div>
</div>
<div class="item7">
<div class="trigger"></div>
<div class="trigger_container"></div>
</div>
<div class="item8">
<div class="trigger"></div>
<div class="trigger_container"></div>
</div>
</div>

但是当手风琴打开时，我希望 div“组”得到一个与 div“trigger_content”高度大小相同的 padding-bottom。更重要的是，当手风琴关闭时，div“组”的填充底部为“0”。

你能帮我解决这个问题吗？谢了

【问题讨论】：

标签： jquery resize accordion padding

【解决方案1】：

尝试类似的方法：

$('.group').css('padding-bottom', $('trigger_content').height())

【讨论】：

代码还是有问题，你能看看吗？ jsfiddle.net/kfcgg/2/embedded/result
你有什么问题？
小提琴中可以看到，元素“group”没有得到元素“toggle_content”的高度。
我添加了一个回调，但父类“组”仍然没有改变高度：jsfiddle.net/kfcgg/4