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

Question

我正在尝试使用Bootstrap 3创建一个手风琴,使用可折叠的数据属性按钮,没有手风琴标记.它对我来说看起来更干净.

但是我无法使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

Bootstrap 4

使用data-parent=""collapse元素上的属性(而不是trigger元素)

<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在使用data-parent属性时,有一个"bug"使手风琴依赖于类.要解决此问题,您可以将每个手风琴组包装在"面板"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和内容div之间有更多层,但是没有用.

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