Bootstrap 折叠 - Jquery“全部折叠”功能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19015081/
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
Bootstrap Collapse - Jquery "Collapse all" function
提问by utdemir
I'm writing a personal feed reader using Bootstrap on frontend, and wanted to add a "Collapse/Expand All" button.
我正在前端使用 Bootstrap 编写个人提要阅读器，并想添加一个“折叠/展开全部”按钮。
It's my first JavaScript/JQuery code, so I don't know how to debug it except printing variables in Firefox Developer Console.
这是我的第一个 JavaScript/JQuery 代码，所以除了在 Firefox Developer Console 中打印变量之外，我不知道如何调试它。
My page structure consist of panels. User can expand or collapse a panel by clicking on panel header. And a button to collapse or expand all panels.
我的页面结构由面板组成。用户可以通过单击面板标题来展开或折叠面板。还有一个按钮来折叠或展开所有面板。
My solution works most of the times, but I noticed one odd behavior. Here is how I reproduce the problem:
我的解决方案大部分时间都有效，但我注意到一种奇怪的行为。这是我重现问题的方法：
- Open the page first time
- Expand one panel with clicking its header
- Now the collapse all button collapses the open panel, and expands the other ones. As if it "toggles" all panels instead of closing them.
- After this odd behavior, everything is normal, I can't reproduce the problem without refreshing the page. On every step
open_panel_countvariable looks normal.
- 第一次打开页面
- 单击其标题展开一个面板
- 现在折叠所有按钮折叠打开的面板，并展开其他面板。好像它“切换”所有面板而不是关闭它们。
- 在这种奇怪的行为之后，一切正常，我无法在不刷新页面的情况下重现该问题。在每一步
open_panel_count变量看起来都很正常。
Here is the methods I'm using:
这是我正在使用的方法：
$(function() {
open_panel_count = 0;
function update_toggle_button() {
$('#toggle-btn').text((open_panel_count ? "Collapse" : "Expand") + " All")
}
update_toggle_button(); // Run once on page load to text #toggle-btn
$('#toggle-btn').click(function() {
$('.panel-collapse').collapse(open_panel_count ? 'hide' : 'show');
});
$('.panel-collapse').on('shown.bs.collapse', function () {
open_panel_count++;
update_toggle_button();
});
$('.panel-collapse').on('hidden.bs.collapse', function () {
open_panel_count--;
update_toggle_button();
});
});
Can anyone point me what I am doing wrong?
谁能指出我做错了什么？
You can see the whole template in: https://github.com/utdemir/furby/blob/master/template.erbAnd access a demo at: http://p.cogunluklazararsiz.org/furby/
您可以在以下位置查看整个模板：https: //github.com/utdemir/furby/blob/master/template.erb并在以下位置访问演示：http: //p.cogunluklazararsiz.org/furby/
回答by JMP
回答by cbayram
According to the Twitter Bootstrap documentation, you can "activate your content as a collapsible element.", by running:
根据 Twitter Bootstrap 文档，您可以“将您的内容激活为可折叠元素。”，通过运行：
$('.panel-collapse').collapse({
toggle: false
});
Adding this should resolve your issue. Give it a go.
添加它应该可以解决您的问题。搏一搏。
$(function() {
$('.panel-collapse').collapse({
toggle: false
});
...
http://getbootstrap.com/javascript/#collapse
http://getbootstrap.com/javascript/#collapse
Not sure why the twitter JS isn't picking up your data-target="#entry419294611" data-toggle="collapse". Tough to debug without a fiddle.
不知道为什么 twitter JS 没有拿起你的data-target="#entry419294611" data-toggle="collapse". 没有小提琴就很难调试。
回答by Aguardientico
Try changing
尝试改变
$('#toggle-btn').click(function() {
$('.panel-collapse').collapse(open_panel_count ? 'hide' : 'show');
});
For
为了
$('#toggle-btn').click(function() {
var state = open_panel_count ? 'hide' : 'show';
$('.panel-collapse').collapse(state);
});
