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

bootstrap 3 collapse('hide') opens all collapsibles?

提问by ptriek

I'm trying to achieve something rather simple, but can't get my head around it - Google hasn't been any help, and Bootstrap docs seem to be a bit confusing.

我试图实现一些相当简单的东西，但无法理解它 - 谷歌没有任何帮助，Bootstrap 文档似乎有点混乱。

What I need:

我需要的：

• simple collapsible accordion, with all collapsibles in closed state on page load
• all collapsibles can be closed with one click on a button.

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

The problem:

问题：

• my solution only works when the user has opened/closed one or more collapsibles
• when I call collapse('hide'), all collapsibles are opened, unless they had already been opened manually before.

• 我的解决方案仅在用户打开/关闭一个或多个可折叠组件时有效
• 当我打电话时collapse('hide')，所有可折叠物品都被打开，除非它们之前已经手动打开过。

See Jsfiddle.

请参阅Jsfiddle。

My markup:

我的标记：

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

The Javascript:

Javascript：

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

What am I missing here?

我在这里错过了什么？

回答by Zim

I think you have to only hidethe open ones like this..

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

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

Here is a working open/close all example: http://bootply.com/123636

这是一个有效的打开/关闭所有示例：http: //bootply.com/123636

回答by Jeong-min Im

I had same problem, so I looked into bootstrap.js code, and figured out what's going on.

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

If you call collapse function without initializing collapse element as javascript, Bootstrap automatically initializes it first. Look at the new Collapsepart. You can see why already opened element isn't a problem here.

如果你调用collapse 函数而不将collapse 元素初始化为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

This is collapse function:

这是折叠功能：

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

The last line is point. If toggle option is true, togglefunction is called. It opens hidden collapsible element or closes shown collapsible element:

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

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

The toggle option is default to true.

切换选项默认为 true。

So, if you want to hide element as below,

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

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

you need to initialize element like this:

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

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

You can find more information in Bootstrap collapse usage.

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