Bootstrap Collapse – Jquery“全部折叠”function

我正在前端使用Bootstrap编写个人提要阅读器，并希望添加“折叠/全部展开”按钮。

这是我的第一个JavaScript / JQuery代码，所以我不知道除了在Firefox Developer Console中打印变量之外如何调试它。

我的页面结构由面板组成。 用户可以通过单击面板标题来展开或折叠面板。 还有一个折叠或展开所有面板的按钮。

我的解决方案大部分时间都有效，但我注意到了一个奇怪的行为。 以下是我重现问题的方法：

1. 第一次打开页面
2. 单击其标题展开一个面板
3. 现在，折叠全部按钮会折叠打开的面板，并展开其他按钮。 好像它“切换”所有面板而不是关闭它们。
4. 在这种奇怪的行为之后，一切都很正常，我无法在不刷新页面的情况下重现问题。 在每一步中， open_panel_count变量看起来都很正常。

这是我正在使用的方法：

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

谁能指出我做错了什么？

您可以在以下url查看整个模板： https ： //github.com/utdemir/furby/blob/master/template.erb并访问以下url获取演示： http ： //p.cogunluklazararsiz.org/furby/

Answer 1

根据Twitter Bootstrap文档，您可以通过运行以下方式“将您的内容激活为可折叠元素。”

 $('.panel-collapse').collapse({ toggle: false }); 

添加此项可以解决您的问题。 搏一搏。

 $(function() { $('.panel-collapse').collapse({ toggle: false }); ... 

http://getbootstrap.com/javascript/#collapse

不确定为什么twitter JS没有拿起你的data-target="#entry419294611" data-toggle="collapse" 。 艰难地调试没有小提琴。

Answer 2

 $('.panel-collapse').collapse('hide'); 

Bootstrap / JQuery Collapse

Answer 3

尝试改变

  $('#toggle-btn').click(function() { $('.panel-collapse').collapse(open_panel_count ? 'hide' : 'show'); }); 

对于

  $('#toggle-btn').click(function() { var state = open_panel_count ? 'hide' : 'show'; $('.panel-collapse').collapse(state); });