基本上我有这个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演示
试试这个 :
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] 删除。
我来说两句