64

我正在尝试使用 Bootstrap 3 使用可与 data 属性折叠的按钮来创建手风琴，而无需手风琴标记。它对我来说看起来更干净。

但是我无法使data-parent属性起作用。我想在打开一个问题时，关闭所有其他问题。我正在阅读文档（http://getbootstrap.com/javascript/#collapse-usage），但仍然无法使其正常工作。

我正在使用以下代码：

<div class="accordion" id="myAccordion">
    <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">Question 1?</button>
    <div id="collapsible-1" class="collapse">
    <p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>
    </div>
    <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">Question 2?</button>
    <div id="collapsible-2" class="collapse">
    <p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>
    </div>
    <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-3" data-parent="#myAccordion">Question 3?</button>
    <div id="collapsible-3" class="collapse">
    <p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>
    </div>
</div>

这是 JSFiddle：http: //jsfiddle.net/twinsen/AEew4/

如果有人指出我犯错的地方，我会很高兴：\

4

7 回答 7

154

引导程序 4

使用data-parent=""折叠元素上的属性（而不是触发元素）

<div id="accordion">
  <div class="card">
    <div class="card-header">
      <h5>
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne">
          Collapsible #1 trigger
        </button>
      </h5>
    </div>
    <div id="collapseOne" class="collapse show" data-parent="#accordion">
      <div class="card-body">
        Collapsible #1 element
      </div>
    </div>
  </div>
  ... (more cards/collapsibles inside #accordion parent)
</div>

引导程序 3

在 GitHub 上查看此问题：https ://github.com/twbs/bootstrap/issues/10966

有一个“错误”使手风琴在使用属性.panel时依赖于类。data-parent要解决此问题，您可以将每个手风琴组包装在“面板”div 中。

http://bootply.com/88288

<div class="accordion" id="myAccordion">
    <div class="panel">
        <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">Question 1?</button>
        <div id="collapsible-1" class="collapse">
            ..
        </div>
    </div>
    <div class="panel">
        <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">Question 2?</button>
        <div id="collapsible-2" class="collapse">
            ..
        </div>
    </div>
    <div class="panel">
        <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-3" data-parent="#myAccordion">Question 3?</button>
        <div id="collapsible-3" class="collapse">
           ...
        </div>
    </div>
</div>

编辑

如评论中所述，每个部分不必是.panel. 然而...

于 2013-10-17T12:02:21.203 回答
16

注意，不仅依赖于 .panel，它还依赖于 DOM 结构。

确保您的元素结构如下：

    <div id="parent-id">
        <div class="panel">
            <a data-toggle="collapse" data-target="#opt1" data-parent="#parent-id">Control</a>
            <div id="opt1" class="collapse">
...

这基本上是@Blazemonger 所说的，但我认为目标元素的层次结构也很重要。我没有完成所有可能性的尝试，但如果你遵循这个层次结构，基本上它应该可以工作。

仅供参考，我在控制 div 和内容 div 之间有更多层，但这不起作用。

于 2013-11-30T04:55:37.997 回答
12

引导程序 3

尝试这个。没有依赖关系的简单解决方案。

$('[data-toggle="collapse"]').click(function() {
  $('.collapse.in').collapse('hide')
});

于 2017-03-01T15:02:51.483 回答
8

正如 Blazemonger 所说，#parent、.panel 和 .collapse 必须是直系后代。但是，如果您无法更改您的 html，您可以使用引导事件和方法以及以下代码来解决问题：

$('#your-parent .collapse').on('show.bs.collapse', function (e) {
    var actives = $('#your-parent').find('.in, .collapsing');
    actives.each( function (index, element) {
        $(element).collapse('hide');
    })
})
于 2015-12-15T09:32:46.407 回答
2

如果发现对 Krzysztof 答案的更改对我的问题有帮助

$('#' + parentId + ' .collapse').on('show.bs.collapse', function (e) {            
    var all = $('#' + parentId).find('.collapse');
    var actives = $('#' + parentId).find('.in, .collapsing');
    all.each(function (index, element) {
      $(element).collapse('hide');
    })
    actives.each(function (index, element) {                
      $(element).collapse('show');                
    })
})

如果您有嵌套面板，那么您可能还需要通过添加另一个类名来区分它们，并将其添加到上述 JavaScript 中的 a 选择器中来指定哪些面板

于 2016-04-26T09:23:09.990 回答
2

这是我为解决 BootStrap V3 的这个问题而开发的（希望如此）通用补丁。除了插入脚本没有特殊要求。

$(':not(.panel) > [data-toggle="collapse"][data-parent]').click(function() {
    var parent = $(this).data('parent');
    var items = $('[data-toggle="collapse"][data-parent="' + parent + '"]').not(this);
    items.each(function() {
        var target = $(this).data('target') || '#' + $(this).prop('href').split('#')[1];
        $(target).filter('.in').collapse('hide');
    });
});

编辑：下面是一个简化的答案，它仍然满足我的需求，我现在正在使用委托的点击处理程序：

$(document.body).on('click', ':not(.panel) > [data-toggle="collapse"][data-parent]', function() {
    var parent = $(this).data('parent');
    var target = $(this).data('target') || $(this).prop('hash');
    $(parent).find('.collapse.in').not(target).collapse('hide');
});
于 2018-08-06T03:18:06.043 回答
1

切换手风琴时我遇到了同样的问题。但是当我尝试将脚本块放在标题块中时，它适用于我的情况！

<head>   
...   
<link rel="stylesheet" href="../assets/css/bootstrap.css" />       
<script src="../assets/js/jquery-1.9.1.min.js" ></script>   
<script src="../assets/js/bootstrap.js" ></script> 
</head>
于 2014-01-23T09:18:29.253 回答