Question

基本上我有这个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 DEMO

Answer 1

试试这个：

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

});

<强> DEMO

当一个人打开jQuery时崩溃关闭其他

1 个答案: