Question

以下是一个简单示例：Link

点击调整大小按钮，使box div更大
再次单击该按钮，使其恢复正常大小。但是，您将看到不应显示的折叠元素。

我想这是由于这一行：

$("div.inbox").collapse("hide");

此行的目的是：如果用户单击a标记以显示折叠元素，则当他们缩小box div时，将隐藏折叠元素。

奇怪的是，问题只发生在第一次点击resize按钮时。我不知道为什么会这样。

Answer 1

当你在一个元素上调用collapse插件时，如果它尚未初始化，则会触发init进程（参见collapse.js source）。

默认情况下，init进程切换元素（如果它被隐藏则显示它，如果它可见则隐藏它） - 相当于.collapse('toggle')。

您需要首先初始化可折叠元素，禁用toggle-on-init参数（请参阅getbootstrap.com doc）：

$("div.inbox").collapse({toggle: false});

请参阅updated fiddle

上的示例

Answer 2

在我的场景中，我做想要在初始隐藏后切换。所以我最终使用了这个：

$thingToCollapse.collapse({ 'toggle': false }).collapse('hide');

Answer 3

看起来像collapse（）第一次用＆＃39; show＆＃39;无论。简单的解决方案是检查是否显示.inbox，如果是，则触发崩溃（＆＃39;隐藏＆＃39;）。我们可以通过检查＆＃34; in＆＃34;来获取元素的状态。添加 - .collapse =元素隐藏，.collapse.in =元素显示

$("button.resize").click(function(){
    var isExpanded = !$("div.box").hasClass("expanded");
    $("div.box").toggleClass("expanded", isExpanded);
    if ($("div.inbox").hasClass("in")) {
        $("div.inbox").collapse('hide');
    }
});

Answer 4

在尝试了很多主题后，我结束了：

来自来源https://getbootstrap.com/docs/3.3/javascript/ .collapse隐藏内容。转换期间应用.collapsing .collapse.in显示内容

//隐藏

if ($('#div').hasClass("in")) {$(#div).removeClass('in');}

//显示

$('#div').addClass('in');

适合我！

Answer 5

$（＆＃34; DIV＆＃34）。崩溃（＆＃34;显示＆＃34）; $（＆＃34; DIV＆＃34）。崩溃（＆＃34;隐藏＆＃34）;

Bootstrap collapse的hide方法将显示collapse元素

5 个答案: