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

Question

这是一个简单的例子:链接

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

我猜这是由于这条线:

$("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});

请参阅更新后的小提琴示例