twitter-bootstrap 当另一个打开时关闭一个 div - Bootstrap
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23971819/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Close one div when the other opens - Bootstrap
提问by 150GritSandpaper
I'm using the bootstrap native collapse functionality Bootstrap: collapse.js v3.0.2 to open div's when a button is pressed. It works great but I would like one div to close when the other opens. Currently, as bootstrap designed it, a single button controls the toggling for the specific div. It is good if I wanted to have one button control one section, but I was wondering if there is a way to make a any button in my list of buttons, close any open div before opening its respective div.
我正在使用引导程序本机折叠功能 Bootstrap: collapse.js v3.0.2 在按下按钮时打开 div。它工作得很好，但我希望一个 div 在另一个打开时关闭。目前，正如引导程序设计的那样，单个按钮控制特定 div 的切换。如果我想让一个按钮控制一个部分，那很好，但我想知道是否有办法在我的按钮列表中创建任何按钮，在打开其各自的 div 之前关闭任何打开的 div。
I have reviewed this code * Bootstrap: collapse.js v3.0.2 * in the bootstrap.js filebut can't figure our how to do what I want.
我已经查看了 bootstrap.js 文件中的这段代码 * Bootstrap: collapse.js v3.0.2 * 但不知道如何做我想做的事。
Can someone point me in the right direction to help me determine what I need to do to get the functionality I'm looking for.
有人可以指出我正确的方向来帮助我确定需要做什么才能获得我正在寻找的功能。
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
I don't know if I need to add more code to the file or if I can just call Bootstrap Data Attributes to accomplish this.
我不知道是否需要向文件添加更多代码，或者是否可以调用 Bootstrap 数据属性来完成此操作。
I have studied this page: http://getbootstrap.com/2.3.2/javascript.html#collapse
我研究过这个页面：http: //getbootstrap.com/2.3.2/javascript.html#collapse
Thank you, Mike
谢谢你，迈克
回答by Nicolai
As I know you can't achieve what you want with Bootstrap data attributes.
据我所知，使用 Bootstrap 数据属性无法实现您想要的。
So you can just add custom data attribute and add some custom javascript that will handle it:
因此，您可以添加自定义数据属性并添加一些自定义 javascript 来处理它：
I used the following data-attribute: data-collapse-groupand the following 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');
});
});
回答by afemath
This will work for different groups of collapse elements without having to add any more js.
这将适用于不同组的折叠元素，而无需添加更多 js。
Just add the data attribute data-collapse-group, with an appropriate value, to the elements in your group that expand and collapse, not the button, and add the following js.
只需将data-collapse-group具有适当值的数据属性添加到组中展开和折叠的元素，而不是按钮，并添加以下js。
$("[data-collapse-group]").on('show.bs.collapse', function () {
var $this = $(this);
var thisCollapseAttr = $this.attr('data-collapse-group');
$("[data-collapse-group='" + thisCollapseAttr + "']").not($this).collapse('hide');
});