Question

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

但是，我无法使数据父级属性生效。我想在打开一个问题时，其他所有人都要关闭。我正在阅读文档（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/

如果有人指出我犯了错误，我会很高兴：\

Answer 1

Bootstrap 4

在collapse元素（而不是触发元素）上使用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>

Bootstrap 3

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

使用.panel属性时，有一个“bug”会使手风琴依赖于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。然而...

.panel必须是用作data-parent=
的元素的直接子元素
每个手风琴部分（data-toggle=）必须是.panel（http://www.bootply.com/AbiRW7BdD6#）
的直接子女

Answer 2

注意，不仅依赖于.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并没有用。

Answer 3

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

＆＃13;

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

＆＃13;

Answer 4

正如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');
    })
})

Answer 5

如果发现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中的选择器

Answer 6

这是我开发的（希望）通用补丁程序，用于解决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');
});

Answer 7

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

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

Bootstrap Accordion按钮切换“data-parent”不起作用

7 个答案: