8

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

这是我的第一个 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/

4

3 回答 3

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

Bootstrap/JQuery 折叠

于 2015-05-26T23:42:30.523 回答
9

根据 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". 不费吹灰之力就很难调试。

于 2013-09-25T22:00:56.363 回答
-2

尝试改变

  $('#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);
  });
于 2013-09-25T21:04:05.677 回答