引导 3 折叠("隐藏")打开所有可折叠对象？

我试图实现一些相当简单的东西，但我无法理解——谷歌没有提供任何帮助，Bootstrap文档似乎有点令人困惑。

我需要什么：

简单的可折叠手风琴，页面加载时所有可折叠物品处于关闭状态
所有的可折叠物品都可以一键关闭

问题：

只有当用户打开/关闭了一个或多个可折叠文件时，我的解决方案才有效
当我调用collapse('hide')时，所有可折叠文件都会打开，除非它们以前已经手动打开过

请参见Jsfidle。

我的标记：

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

我在这里错过了什么？

我认为你只需要hide像这样打开的。。

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

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

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

如果调用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

这是折叠功能：

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

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

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

切换选项默认为true。

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

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

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

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

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

相关内容

最新更新

热门标签：