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数据属性来实现此目的。

我研究了这个页面：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.

Answer 2

这将适用于不同的崩溃元素组，而无需再添加任何js。

只需将具有适当值的数据属性$http({ url: '/api/files/download', method: "POST", data: { uri: uri }, responseType: 'blob' }).then(function (response) { var data = response.data; var headers = response.headers; var blob = new Blob([data], { type: 'audio/mpeg' }); var fileName = headers('content-disposition'); saveAs(blob, fileName); }).catch(function (response) { console.log('Unable to download the file') });添加到组中展开和折叠的元素，而不是按钮，然后添加以下js。

＆＃13;

data-collapse-group

＆＃13;

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

2 个答案: