Bootstrap Collapse - Jquery"全部折叠"功能

Question

我正在前端使用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();
  });
});

谁能指出我做错了什么？

您可以在以下网址中查看整个模板:https://github.com/utdemir/furby/blob/master/template.erb 并访问以下网址的演示:http://p.cogunluklazararsiz.org/furby/

Answer 1

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

Bootstrap/JQuery Collapse

Answer 2

根据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".艰难地调试没有小提琴.