引导折叠按钮如何防止两个折叠显示

Bootstrap Collapse Button How to prevent two collapse showing up

本文关键字：折叠 两个 显示 何防止 按钮      更新时间：2023-09-26

我有一个像这样的代码:

        <a class="btn btn-primary" role="button" data-toggle="collapse" href="#about" aria-expanded="false" aria-controls="collapseExample">About</a> 
        <a class="btn btn-primary" role="button" data-toggle="collapse" href="#contact" aria-expanded="false" aria-controls="collapseExample">Contact</a>
        <div class="collapse" id="about">
            <div class="well">
            about
            </div>
        </div>
        <div class="collapse" id="contact">
            <div class="well">
            contact us
            </div>
        </div>

当我点击这两个按钮时，会出现两个折叠框。是否有一种方法可以一次只显示一个折叠，比如说，如果我点击"关于"按钮，"联系人"折叠将关闭，如果它是打开的，然后如果我再次点击"联系人"按钮，"关于"折叠框将关闭。

谢谢。

我已经弄清楚了，我所做的就是在head标签中添加以下内容:

<script type='text/javascript' src='http://code.jquery.com/jquery-compat-git.js'></script>
<<script type='text/javascript'>//<![CDATA[
$(window).on('load', function() {
$("[data-collapse-group='myDivs']").click(function () {
    var $this = $(this);
    $("[data-collapse-group='myDivs']:not([data-target='" + $this.data("target") + "'])").each(function () {
        $($(this).data("target")).removeClass("in").addClass('collapse');
    });
});
});//]]> 
</script>
相关文章：