在 bootstrap 和 angular 中仅折叠一个子类别
make only one subcategory to collapse in bootstrap and angular
我正在使用 jquery 和 bootstrap,我有一个下拉列表,单击该类别即可打开。但我一次只想扩展一个类别。如果任何其他类别已经展开,则在单击其他类别时,展开的类别应该折叠
<div class="row">
<div class="col-md-offset-1 col-md-3 col-sm-offset-0 col-sm-4">
<div id="menu">
<div class="panel list-group">
<a href="" class="list-group-item" id="heading">
<strong>Browse By Categories</strong>
</a>
<div>
<a class="list-group-item" data-toggle="collapse" data-target="#AAA" data-parent="#menu">
AAA <span class="glyphicon glyphicon-chevron-down pull-right"></span>
</a>
<div id="AAA" class="sublinks collapse">
<a class="list-group-item small">
<span class="glyphicon glyphicon-chevron-right"></span> aaaa
</a>
<a class="list-group-item small">
<span class="glyphicon glyphicon-chevron-right"></span> aaaa
</a>
<a class="list-group-item small">
<span class="glyphicon glyphicon-chevron-right"></span> aaaa
</a>
<a class="list-group-item small">
<span class="glyphicon glyphicon-chevron-right"></span> aaaa
</a>
</div>
<a class="list-group-item" data-toggle="collapse" data-target="#BBB" data-parent="#menu">
BBB <span class="glyphicon glyphicon-chevron-down pull-right"></span>
</a>
<div id="BBB" class="sublinks collapse">
<a class="list-group-item small">
<span class="glyphicon glyphicon-chevron-right"></span> aaaa
</a>
<a class="list-group-item small">
<span class="glyphicon glyphicon-chevron-right"></span> aaaa
</a>
<a class="list-group-item small">
<span class="glyphicon glyphicon-chevron-right"></span> aaaa
</a>
<a class="list-group-item small">
<span class="glyphicon glyphicon-chevron-right"></span> aaaa
</a>
</div>
</div>
</div>
</div>
</div>
</div>
我也附上了jsfiddle,如果可以,请修复它。
https://jsfiddle.net/dpmvvq25/3/
谢谢。
我认为您需要手风琴组件,这是使用 bootstrap 的示例:
http://jsfiddle.net/zessx/r6eaw/12/
function toggleChevron(e) {
$(e.target)
.prev('.panel-heading')
.find("i.indicator")
.toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
我正在使用 jquery 和 bootstrap,我有一个下拉列表,单击该类别即可打开。但我一次只想扩展一个类别。如果任何其他类别已经展开,则在单击其他类别时,展开的类别应该折叠
<div class="row">
<div class="col-md-offset-1 col-md-3 col-sm-offset-0 col-sm-4">
<div id="menu">
<div class="panel list-group">
<a href="" class="list-group-item" id="heading">
<strong>Browse By Categories</strong>
</a>
<div>
<a class="list-group-item" data-toggle="collapse" data-target="#AAA" data-parent="#menu">
AAA <span class="glyphicon glyphicon-chevron-down pull-right"></span>
</a>
<div id="AAA" class="sublinks collapse">
<a class="list-group-item small">
<span class="glyphicon glyphicon-chevron-right"></span> aaaa
</a>
<a class="list-group-item small">
<span class="glyphicon glyphicon-chevron-right"></span> aaaa
</a>
<a class="list-group-item small">
<span class="glyphicon glyphicon-chevron-right"></span> aaaa
</a>
<a class="list-group-item small">
<span class="glyphicon glyphicon-chevron-right"></span> aaaa
</a>
</div>
<a class="list-group-item" data-toggle="collapse" data-target="#BBB" data-parent="#menu">
BBB <span class="glyphicon glyphicon-chevron-down pull-right"></span>
</a>
<div id="BBB" class="sublinks collapse">
<a class="list-group-item small">
<span class="glyphicon glyphicon-chevron-right"></span> aaaa
</a>
<a class="list-group-item small">
<span class="glyphicon glyphicon-chevron-right"></span> aaaa
</a>
<a class="list-group-item small">
<span class="glyphicon glyphicon-chevron-right"></span> aaaa
</a>
<a class="list-group-item small">
<span class="glyphicon glyphicon-chevron-right"></span> aaaa
</a>
</div>
</div>
</div>
</div>
</div>
</div>
我也附上了jsfiddle,如果可以,请修复它。
https://jsfiddle.net/dpmvvq25/3/
谢谢。
我认为您需要手风琴组件,这是使用 bootstrap 的示例: http://jsfiddle.net/zessx/r6eaw/12/
function toggleChevron(e) {
$(e.target)
.prev('.panel-heading')
.find("i.indicator")
.toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);