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

Question

我正在使用Bootstrap前端编写个人的RSS阅读器，并想添加一个“收起/展开全部”按钮。

这是我第一次编写JavaScript / JQuery代码，因此除了在Firefox开发者控制台中打印变量之外，我不知道如何调试它。

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

我的解决方案大多数时候都有效，但我注意到了一种奇怪的行为。以下是我如何重现问题：

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/上访问演示。

- utdemir

Answer 1

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

Bootstrap/JQuery 折叠功能

- JMP

---

似乎在Chrome中无法工作... JavaScript调试器显示“collapse不是一个函数” :-/ - user1300214

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"。没有Fiddle很难调试。

- cbayram

---

如果你正在使用Firefox浏览器，那么Firebug插件是一个非常流行的调试工具，你可能想要考虑一下。 - cbayram

谢谢，这解决了我的问题，但我不知道为什么，我没有在任何地方切换它。现在正在寻找Firebug。 - utdemir

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

- Aguardientico

---

对不起，这没有改变任何事情。当我认为表达式只会被计算一次，并且两个代码是相同的时，我错了吗？ - utdemir

查看折叠代码（https://github.com/twbs/bootstrap/blob/master/js/collapse.js），它似乎运行了一个jquery.each，然后我认为它会对每个带有panel-collapse类的元素进行评估。 - Aguardientico