Javascript Twitter Bootstrap多级手风琴，带jQueryUI排序

若我将第一级组group 2元素放入子级组列表中，它将与父级accordion一起折叠关闭。如何解决这个问题

HTML

---

塌陷和展开事件在加载时绑定，并在重新排列后影响相同的图元。 我不知道twitter引导是否能让你覆盖这些事件并重置需要折叠和扩展的元素。如果不是-也许考虑扩展他们的版本。< /P>

$(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"
});

});

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