bootstrap 3 collapse('hide')打开所有可折叠的东西？

Question

我正在努力实现一些相当简单的事情,但无法理解它 - 谷歌没有任何帮助,而Bootstrap文档似乎有点令人困惑.

我需要的:

• 简单的可折叠手风琴,在页面加载时所有可折叠的处于关闭状态
• 只需单击一个按钮即可关闭所有可折叠按钮.

问题:

• 我的解决方案仅在用户打开/关闭一个或多个可折叠项时才有效
• 当我打电话时collapse('hide'),所有可折叠的东西都打开了,除非它们之前已经手动打开过.

见Jsfiddle.

我的加价:

<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>

Javascript:

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

我在这里错过了什么？

Answer 1

我想你只需要hide像这样开放的......

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

这是一个工作打开/关闭所有示例:http://bootply.com/123636

Answer 2

我遇到了同样的问题，所以我查看了 bootstrap.js 代码，并弄清楚发生了什么。

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

// 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()
}

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

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

切换选项默认为 true。

所以，如果你想隐藏如下元素，

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

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

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

您可以在Bootstrap 折叠用法中找到更多信息。