Bootstrap 手风琴按钮切换“数据父级”不起作用

Question

我正在尝试使用 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/

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

Answer 1

引导程序 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

当使用data-parent属性时，有一个“错误”使手风琴依赖于.panel类。 要解决此问题，您可以将每个手风琴组包装在一个“面板”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的直接子.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 和内容 div 之间有更多层，但这不起作用。

Answer 3

引导程序 3

试试这个。 没有依赖性的简单解决方案。

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

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 中的 a 选择器

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>