twitter-bootstrap Bootstrap collapse 的 hide 方法会显示出折叠元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24013926/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
The hide method of Bootstrap collapse will show the collapse element
提问by Harrison
Here is a simple example: Link
这是一个简单的例子：链接
- click the resizebutton, making the
box divbigger - click the button again, making it back to normal size. However, you will see the collapse element which should not be displayed.
- 单击调整大小按钮，使
box div更大 - 再次单击该按钮，使其恢复正常大小。但是，您将看到不应显示的折叠元素。
I guess it's due to this line:
我想这是由于这一行：
$("div.inbox").collapse("hide");
The purpose of this line is: if users clicked the atag to show the collapse element, when they shrink the box div, the collapse element will be hidden.
这一行的目的是：如果用户点击a标签显示折叠元素，当他们缩小 时box div，折叠元素将被隐藏。
The weird thing is the problem only happens at the first time of clicking resizebutton. I have no idea about why it happens.
奇怪的是问题只发生在第一次点击resize按钮时。我不知道为什么会这样。
回答by Sherbrow
When you call the collapse plugin on an element, if it has not been initialized, the init process is triggered (see collapse.js source).
当你在一个元素上调用 collapse 插件时，如果它没有被初始化，则触发 init 过程（参见collapse.js 源代码）。
By default, the init process toggles the elements (showing it if it is hidden, and hiding it if it is visible) - equivalent to .collapse('toggle').
默认情况下，init 进程切换元素（如果隐藏则显示它，如果它可见则隐藏它） - 相当于.collapse('toggle').
You'd need to initialize the collapsible element first, disabling the toggle-on-init parameter (see getbootstrap.com doc):
您需要先初始化可折叠元素，禁用 toggle-on-init 参数（请参阅getbootstrap.com 文档）：
$("div.inbox").collapse({toggle: false});
See example on your updated fiddle
请参阅更新的小提琴示例
回答by Dan Marshall
In my scenario, I dowant toggling after the initial hide. So I ended up using this:
在我的场景中，我确实想在初始隐藏后切换。所以我最终使用了这个：
$thingToCollapse.collapse({ 'toggle': false }).collapse('hide');
回答by MatB
After trying many tomes I've ended with:
在尝试了许多大部头之后，我以：
From source https://getbootstrap.com/docs/3.3/javascript/.collapse hides content .collapsing is applied during transitions .collapse.in shows content
从源https://getbootstrap.com/docs/3.3/javascript/.collapse 隐藏内容 .collapsing 在过渡期间应用 .collapse.in 显示内容
// Hide
// 隐藏
if ($('#div').hasClass("in")) {$(#div).removeClass('in');}
// Show
// 展示
$('#div').addClass('in');
Works for me!
对我有用！
回答by Bizley
It looks like collapse() fires for the first time with 'show' no matter what. Simple solution is to check if .inbox is shown and if so to fire collapse('hide'). We can get the state of the element by checking if class "in" is added - .collapse = element hidden, .collapse.in = element shown
无论如何，看起来 collapse() 都是第一次使用“show”触发。简单的解决方案是检查 .inbox 是否显示，如果显示，则触发折叠（'隐藏'）。我们可以通过检查是否添加了类“in”来获取元素的状态 - .collapse = element hidden, .collapse.in = element shown
$("button.resize").click(function(){
var isExpanded = !$("div.box").hasClass("expanded");
$("div.box").toggleClass("expanded", isExpanded);
if ($("div.inbox").hasClass("in")) {
$("div.inbox").collapse('hide');
}
});
回答by pasichnu4ka
$("div").collapse("show"); $("div").collapse("hide");
$("div").collapse("show"); $("div").collapse("隐藏");
