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代码，并找出了正在发生的事情。

如果在没有将collapse元素初始化为javascript的情况下调用collapse函数，Bootstrap会自动初始化它。查看 new Collapse 部分。你可以看到为什么已经打开元素在这里不是问题。

enterprise = new Enterprise(); 
enterprise.PrimaryDomain = primaryDomainName;
EnterprisesResource obj = new EnterprisesResource(service);
Enterprise result = obj.Enroll(enterprise, authenticationToken).Execute();

这是崩溃功能：

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

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

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

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

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

您可以在Bootstrap collapse usage中找到更多信息。

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

2 个答案: