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

vojdkbi0 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(2)|浏览(178)

我使用的是 Bootstrap 自带的崩溃功能Bootstrap：collapse.js v3.0.2来在按下一个按钮时打开div。它工作得很好，但是我希望一个div在另一个打开时关闭。目前，正如bootstrap所设计的，一个按钮控制特定div的切换。如果我想用一个按钮控制一个部分，这是很好的，但是我想知道是否有一种方法可以在我的按钮列表中创建一个任意按钮，请在打开任何打开div之前先关闭该div。
我已经检查了此代码 * Bootstrap：collapse.js v3.0.2 * 在bootstrap.js文件中，但不知道如何执行我想要的操作。
有人能为我指出正确的方向，帮助我确定我需要做些什么来获得我所寻求的功能吗？

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
谢谢你，迈克

twitter-bootstrap

来源：https://stackoverflow.com/questions/23971819/close-one-div-when-the-other-opens-bootstrap

2条答案

按热度按时间

ldfqzlk81#

正如我所知，你不能实现你想要的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.

赞(0）回复(0）举报 2022-12-07

xurqigkl2#

这将适用于不同组的折叠元素，而无需添加更多的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');
});

赞(0）回复(0）举报 2022-12-07

我来回答

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

2条答案

相关问题

热门标签

最新问答