Twitter bootstrap 引导3折叠（'；隐藏'；）是否打开所有可折叠文件？

我正试图实现一些相当简单的东西，但我的头脑还没有清醒过来——谷歌没有提供任何帮助，引导文档似乎有点混乱

我需要的是：

• 简单可折叠手风琴，页面加载时所有可折叠手风琴均处于关闭状态
• 单击一个按钮即可关闭所有可折叠文件

问题是：

• 我的解决方案仅在用户打开/关闭一个或多个可折叠文件时有效
• 当我调用

  collapse（'hide'）

  时，将打开所有可折叠文件，除非它们以前已经手动打开过

看

我的标记：

<a class="btn btn-default" id="collapseall"><span class="icon"></span>Collapse 'm all!</a>

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

---

我在这里遗漏了什么？

我想你只需要

隐藏
像这样打开的东西

$('#collapseall').click(function(){
  $('.panel-collapse.in')
    .collapse('hide');
});

下面是一个正在运行的打开/关闭所有的示例：
我也遇到了同样的问题，所以我查看了bootstrap.js代码，并找出了发生了什么

如果调用collapse函数而没有将collapse元素初始化为javascript，则引导程序会首先自动初始化它。查看新的折叠部分。您可以看到为什么已经打开的元素在这里不是问题

// COLLAPSE PLUGIN DEFINITION
// ==========================

function Plugin(option) {
    return this.each(function () {
      var $this   = $(this)
      var data    = $this.data('bs.collapse')
      var options = $.extend({}, Collapse.DEFAULTS, $this.data(), typeof option == 'object' && option)

      if (!data && options.toggle && option == 'show') options.toggle = false
      if (!data) $this.data('bs.collapse', (data = new Collapse(this, options)))
      if (typeof option == 'string') data[option]()
    })
}

var old = $.fn.collapse

$.fn.collapse             = Plugin

这是折叠函数：

var Collapse = function (element, options) {
    this.$element      = $(element)
    this.options       = $.extend({}, Collapse.DEFAULTS, options)
    this.$trigger      = $(this.options.trigger).filter('[href="#' + element.id + '"], [data-target="#' + element.id + '"]')
    this.transitioning = null

    if (this.options.parent) {
      this.$parent = this.getParent()
    } else {
      this.addAriaAndCollapsedClass(this.$element, this.$trigger)
    }

    if (this.options.toggle) this.toggle()
}

最后一行是point。如果toggle选项为true，则调用toggle函数。
打开隐藏的可折叠图元或关闭显示的可折叠图元：

Collapse.prototype.toggle = function () {
    this[this.$element.hasClass('in') ? 'hide' : 'show']()
}

切换选项默认为true

所以，如果您想隐藏元素，如下所示

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

您需要像这样初始化元素：

$('#myCollapsible').collapse({
  toggle: false
});

您可以在中找到更多信息。
这确实是一个合理的解决方案，谢谢。虽然我仍然有一种感觉，我没有完全掌握引导折叠的show/hide/toggle参数背后的逻辑。。。
$('#myCollapsible').collapse({
  toggle: false
});