Bootstrap折叠的hide方法将显示折叠元素

Question

这里有一个简单的例子：链接

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

我猜这是由于这行代码造成的：

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

这行代码的作用是: 如果用户点击了标签来显示折叠元素，在他们缩小box div时，折叠元素将会被隐藏。

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

- Harrison

Answer 1

当您在一个元素上调用折叠插件时，如果该元素尚未初始化，则会触发初始化过程（请参见collapse.js源代码）。

默认情况下，初始化过程切换元素的状态（如果它是隐藏的则显示它，如果它是可见的则隐藏它）- 等同于.collapse('toggle')。

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

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

请查看您的更新后的代码片段示例

- Sherbrow

---

非常感谢。顺便说一下，在我的应用程序中，“box div”是通过“ajax”动态生成的。正确的初始化方式是什么？ - Harrison

@Harrison 在一个ajax过程中，通常是在它被创建之后，但你应该四处看看，肯定已经有人问过那个问题了。 - Sherbrow

Answer 2

在我的情况下，我希望在初始隐藏后进行切换。因此，我最终使用了以下代码：

（在标签中保留HTML标记）

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

- Dan Marshall

Answer 3

经过多次尝试，我最终选择了以下方法:

从源代码https://getbootstrap.com/docs/3.3/javascript/ .collapse 隐藏内容 .collapsing 在转换期间应用 .collapse.in 显示内容

// 隐藏

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

// 展示

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

对我来说有效！

- MatB

Answer 4

看起来无论如何，collapse()函数第一次都会触发'show'。简单的解决方法是检查.inbox是否显示，如果显示，则触发collapse('hide')。我们可以通过检查是否添加了“in”类来获取元素的状态 - .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');
    }
});

- Bizley

Answer 5

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

- pasichnu4ka