css 使得只有一个子类在bootstrap和angular中崩溃

kqhtkvqz 于 2022-11-27 发布在 Bootstrap

关注(0)|答案(1)|浏览(120)

我正在使用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/
谢谢你，谢谢你。

css

来源：https://stackoverflow.com/questions/35346537/make-only-one-subcategory-to-collapse-in-bootstrap-and-angular

1条答案

按热度按时间

2exbekwf1#

我认为你需要accordion组件，下面是一个使用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);

赞(0）回复(0）举报 2022-11-27

我来回答

css 使得只有一个子类在bootstrap和angular中崩溃

1条答案

相关问题

热门标签

最新问答