单击另一个折叠时放弃关闭所有折叠。
我有几个由php/mysql生成的折叠组作为多级菜单运行。
基本上它工作得很好,除了一个小问题。当我单击另一个组中的父元素时,我希望所有其他父元素都关闭。
我的跑步菜单的完整HTML副本可以在这里看到:jsFiddle
HTML格式:
<div class="panel panel-default">
<div class="panel-heading">Categories</div>
<div id="menu" class="panel-body">
<div parentid="cPath_1" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-danger"><a href="index.php?cPath=1">Hardware</a><a href="#cpath_1" data-toggle="collapse" data-parent="#cpath_1"><span class="toggleMe glyphicon pull-right glyphicon-chevron-down"></span></a>
</li>
<div id="cpath_1" class="list-group collapse in" style="margin-bottom: -2px; height: auto;">
<div parentid="cPath_17" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-danger"><a href="index.php?cPath=1_17">CDROM Drives</a><a class="collapsed" href="#cpath_17" data-toggle="collapse" data-parent="#cpath_1"><span class="toggleMe glyphicon pull-right glyphicon-chevron-down"></span></a>
</li>
<div id="cpath_17" class="list-group collapse in" style="margin-bottom: -2px; height: auto;">
<div parentid="cPath_22" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-danger"><a href="index.php?cPath=1_17_22">Testcat</a><a class="" href="#cpath_22" data-toggle="collapse" data-parent="#cpath_1"><span class="toggleMe glyphicon pull-right glyphicon-chevron-down"></span></a>
</li>
<div id="cpath_22" class="list-group collapse in" style="margin-bottom: -2px; height: auto;">
<div parentid="cPath_23" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning"><a href="index.php?cPath=1_17_22_23">Testcat2</a>
</li>
</div>
</div>
</div>
</div>
</div>
<div parentid="cPath_4" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning"><a href="index.php?cPath=1_4">Graphics Cards</a>
</li>
</div>
<div parentid="cPath_8" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning"><a href="index.php?cPath=1_8">Keyboards</a>
</li>
</div>
<div parentid="cPath_16" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning"><a href="index.php?cPath=1_16">Memory</a>
</li>
</div>
<div parentid="cPath_9" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning"><a href="index.php?cPath=1_9">Mice</a>
</li>
</div>
<div parentid="cPath_6" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning"><a href="index.php?cPath=1_6">Monitors</a>
</li>
</div>
<div parentid="cPath_5" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning"><a href="index.php?cPath=1_5">Printers</a>
</li>
</div>
<div parentid="cPath_7" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning"><a href="index.php?cPath=1_7">Speakers</a>
</li>
</div>
</div>
</div>
<div parentid="cPath_2" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-info"><a href="index.php?cPath=2">Software</a><a class="collapsed" href="#cpath_2" data-toggle="collapse" data-parent="#cpath_2"><span class="toggleMe glyphicon pull-right glyphicon-chevron-right"></span></a>
</li>
<div id="cpath_2" class="list-group collapse" style="margin-bottom: -2px; height: 0px;">
<div parentid="cPath_19" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning"><a href="index.php?cPath=2_19">Action</a>
</li>
</div>
<div parentid="cPath_18" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning"><a href="index.php?cPath=2_18">Simulation</a>
</li>
</div>
<div parentid="cPath_20" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning"><a href="index.php?cPath=2_20">Strategy</a>
</li>
</div>
</div>
</div>
<div parentid="cPath_3" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-info"><a href="index.php?cPath=3">DVD Movies</a><a href="#cpath_3" data-toggle="collapse" data-parent="#cpath_3"><span class="toggleMe glyphicon glyphicon-chevron-right pull-right"></span></a>
</li>
<div id="cpath_3" class="list-group collapse" style="margin-bottom: -2px;">
<div parentid="cPath_10" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning"><a href="index.php?cPath=3_10">Action</a>
</li>
</div>
<div parentid="cPath_13" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning"><a href="index.php?cPath=3_13">Cartoons</a>
</li>
</div>
<div parentid="cPath_12" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning"><a href="index.php?cPath=3_12">Comedy</a>
</li>
</div>
<div parentid="cPath_15" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning"><a href="index.php?cPath=3_15">Drama</a>
</li>
</div>
<div parentid="cPath_11" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning"><a href="index.php?cPath=3_11">Science Fiction</a>
</li>
</div>
<div parentid="cPath_14" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning"><a href="index.php?cPath=3_14">Thriller</a>
</li>
</div>
</div>
</div>
<div parentid="cPath_21" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning"><a href="index.php?cPath=21">Gadgets</a>
</li>
</div>
</div>
</div>
JS:
//if click chevron's
$('.toggleMe').click(function(){
var parent = $(this).closest('.list-group').attr('parentid').split( "_" )[1];
$(this).toggleClass('glyphicon-chevron-down glyphicon-chevron-right');
$(this).closest('.list-group-item').toggleClass('list-group-item-danger list-group-item-info');
//$( '.list-group' ).not('#cpath_'+parent+'').toggle();
//alert('cPath_'+parent); //this is the required main value , all elements inside this should stay open if are open
});
在第一次载入时看到所有父项。2当点击硬件时,菜单展开。3但是现在当决定点击软件时,硬件保持打开状态。
1条答案
按热度按时间yjghlzjz1#
首先,其他面板的折叠依赖于DOM结构。每个面板都应该被 Package 在一个类为'. panel'的div中。你可以参考issue了解更多细节。
其次,data-parent属性应该引用 Package 所有面板的元素,您只希望打开其中一个面板。
下面是修改后的代码http://jsfiddle.net/zbrhu/1/