带有 jQueryUI 排序的 Twitter Bootstrap 多级手风琴答案

【问题标题】：Twitter Bootstrap Multi level accordion with jQueryUI sorting带有 jQueryUI 排序的 Twitter Bootstrap 多级手风琴
【发布时间】：2013-05-13 21:01:35
【问题描述】：

如果我将第一级组“Group #2”元素放入子级组列表中，它将与父手风琴一起折叠（关闭）。如何解决这个问题？

jsFiddle Demo

$(document).ready(function() {

//append for all headings indicatoe icon-plus
$('.accordion-heading').prepend('<i class="ui-icon ui-icon-triangle-1-e"></i>');

// Change indicator element for sub-menu
$('.accordion-body').on('show', function(e) {
    e.stopPropagation();
   $(this).siblings('.accordion-heading').children('.ui-icon').removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s');
});
//Reverse it
$('.accordion-body').on('hide', function(e) {
    e.stopPropagation();
   $(this).siblings('.accordion-heading').children('.ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
});

//Make tabs sortable
$(".accordion-body > .accordion, .sidebar").sortable({
                connectWith: ".accordion",
                placeholder: "ui-state-highlight"
});

});

HTML

<nav class="accordion1 accordion sidebar">

    <div class="accordion-group">
        <div class="accordion-heading">
            <a data-toggle="collapse" data-parent=".accordion2" href=".collapse-one">
                Group #1 </a>
        </div>
        <div class="collapse-one accordion-body collapse" style="height: 0px;">
...
                <div class="accordion2 accordion">
                    <div class="accordion-group">
                        <div class="accordion-heading">
                            <a data-toggle="collapse" data-parent=".accordion2" href=".collapse-one-one">
                                Sub-group #1 </a>
                        </div>
                        <div class="collapse-one-one accordion-body collapse" style="height: 0px;">
...
                        </div>
                    </div>
                    <div class="accordion-group">
                        <div class="accordion-heading">
                            <a data-toggle="collapse" data-parent=".accordion2" href=".collapse-one-two">
                                Sub-group #2 </a>
                        </div>
                        <div class="collapse-one-two accordion-body collapse" style="height: 0px;">
...
                        </div>
                    </div>
                    <div class="accordion-group">
                        <div class="accordion-heading">
                            <a data-toggle="collapse" data-parent=".accordion2" href=".collapse-one-three">
                                Sub-Group #3 </a>
                        </div>
                        <div class="collapse-one-three accordion-body collapse">
...
                        </div>
                    </div>
                </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a data-toggle="collapse" data-parent=".accordion1" href=".collapse-two">
                Group #2 </a>
        </div>
        <div class="collapse-two accordion-body collapse" style="height: 0px;">
...
        </div>
    </div>

【问题讨论】：

标签： javascript jquery jquery-ui css twitter-bootstrap

【解决方案1】：

折叠和展开事件在加载时绑定，并在重新排列后影响相同的元素。
我不知道 twitter-bootstrap 是否可以让您覆盖这些事件并重置需要折叠和展开的元素。如果没有 - 也许考虑扩展他们的版本。

【讨论】：