twitter-bootstrap - 当另一个 div 打开时关闭一个 div - Bootstrap

Question

我正在使用 Bootstrap 原生折叠功能 Bootstrap: collapse.js v3.0.2 在按下按钮时打开 div。它工作得很好，但我希望一个 div 在另一个打开时关闭。目前，正如 Bootstrap 设计的那样，一个按钮控制特定 div 的切换。如果我想让一个按钮控制一个部分，那很好，但我想知道是否有办法在我的按钮列表中创建一个按钮，在打开其各自的 div 之前关闭任何打开的 div。

我已经在 bootstrap.js 文件中查看了这段代码 * Bootstrap: collapse.js v3.0.2 * 但不知道如何做我想做的事。

谁能指出我正确的方向，以帮助我确定我需要做什么才能获得我正在寻找的功能。

This is the URL to the page I'm developing where you can see the buttons working: http://23.229.158.126/orangecounty-coolsculpting.com/about-orange-county-dualsculpting.html

我不知道是否需要向文件中添加更多代码，或者是否可以调用 Bootstrap Data Attributes 来完成此操作。

我研究过这个页面:http://getbootstrap.com/2.3.2/javascript.html#collapse

谢谢你，迈克

Answer 1

据我所知，您无法使用 Bootstrap 数据属性实现您想要的。

所以您可以添加自定义数据属性并添加一些自定义 javascript 来处理它:

我使用了以下数据属性:data-collapse-group和以下javascript:

$("[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');
    });
});

Working example in jsFiddle based on your page.