当一个打开的jQuery折叠时关闭其他

debugcn 发表于 Dev

用户名

基本上我有这个HTML代码：

<ul id="menu_parent_1" class="collapse in">
    <li>
        <a href="http://test.com" class="list-group-item index">PARENT TEST 00</a>
    </li>
    <li class="SubMenuParent">
        <a data-toggle="collapse" href="#menu_carrier" class="list-group-item carrier ">PARENT TEST 01</a>
    </li>
    <ul style="height: auto;" class="collapse SubMenu" id="menu_carrier">
        <li class="active">
            <a href="http://test.com">SubTest 011</a>
        </li>
        <li>
            <a href="http://test.com">SubTest 012</a>
        </li>
        <li>
            <a href="http://test.com">SubTest 012</a>
        </li>
    </ul>
    <li class="SubMenuParent">
        <a data-toggle="collapse" href="#menu_customer" class="list-group-item customer ">PARENT TEST 02</a>
    </li>
    <ul style="height: auto;" class="collapse SubMenu in" id="menu_customer">
        <li class="active" style="background: none repeat scroll 0px 0px rgba(0, 0, 0, 0.1);">
            <a href="http://test.com">SubTest 021</a>
        </li>
        <li>
            <a href="http://test.com">SubTest 022</a>
        </li>

    </ul>
    <li class="SubMenuParent">
        <a data-toggle="collapse" href="#menu_rules" class="list-group-item rules ">PARENT TEST 02</a>
    </li>
    <ul style="height: auto;" class="collapse SubMenu" id="menu_rules">
        <li class="active">
            <a href="http://test.com">SubTest1</a>
        </li>
    </ul>
</ul>

通过单击，PARENT TEST我希望它的内容含义（其SUB TEST）向下滑动，其他向上滑动。到目前为止，这是我尝试过的但没有成功的方法：

jQuery('.SubMenuParent a').click(function() {
    var Toggle = jQuery(this).closest('ul');
    jQuery(this).not(Toggle).slideUp()
    jQuery(".SubMenu").each(function( index ) {
        if(jQuery(this).hasClass("in")){
            jQuery(this).slideToggle();
            // jQuery(this).slideUp();
        }
    });

});

有什么帮助吗？非常感谢。JSFIDDLE演示

布山·卡瓦德卡（Bhushan Kawadkar）

试试这个：

jQuery('.SubMenuParent a').click(function() {
    var Toggle = jQuery(this).closest('li').next('ul.SubMenu');
    //slide up all submenu except for clicked subMenuParent
    jQuery('ul.SubMenu').not(Toggle).slideUp();
    //remove 'in' class
    jQuery('.in').removeClass('in');

    //toggle menu and add class 'in'
    jQuery(Toggle).addClass('in').slideToggle();

});

演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。