当另一个打开时关闭一个div-Bootstrap [英] Close one div when the other opens - Bootstrap

问题描述

我正在使用Bootstrap原生折叠功能Bootstrap：collapse.js v3.0.2在按下按钮时打开div。效果很好，但是我希望一个div在另一个打开时关闭。目前，正如引导程序所设计的那样，单个按钮可控制特定div的切换。如果我想让一个按钮控制一个部分，那很好，但是我想知道是否可以在我的按钮列表中制作一个按钮，在打开其相应的div之前先关闭所有打开的div。

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 *在bootstrap.js文件中，但无法弄清楚我们该怎么做。

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.

有人可以为我指出正确的方向，以帮助我确定需要做些什么才能获得所需的功能。

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.

我研究了以下页面： http://getbootstrap.com/2.3.2/ja vascript.html＃collapse

谢谢你，
迈克

Thank you, Mike

推荐答案

据我所知，使用Bootstrap数据属性无法实现所需的功能。

As I know you can't achieve what you want with Bootstrap data attributes.

因此，您只需添加自定义数据属性，并添加一些可以处理它的自定义javascript：

So you can just add custom data attribute and add some custom javascript that will handle it:

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

I used the following data-attribute: data-collapse-group and the following 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');
    });
});

基于您页面的jsFiddle工作示例。

这篇关于当另一个打开时关闭一个div-Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！