Bootstrap 手风琴 - 如何在使用下拉菜单时只打开 1 个面板?

Bootstrap Accordions - How to keep only 1 panel open when using a Dropdown?

找不到解决这个确切问题的任何内容;看起来很简单,但我一直无法让它工作。

基本上,我只想要一个普通的手风琴,除了不需要按下一系列按钮来展开文本面板,我希望可以从单个下拉列表中选择选项。我已经可以正常工作了,但现在我不知道如何应用 data-parent 属性,所以一次只能打开 1 个面板。

我一直在研究正常的手风琴代码并尝试将相同的概念应用到我的下拉列表中,但不同的结构意味着我不能只复制和粘贴相关代码而且我不确定data-parent 如何与手风琴一起工作的详细信息。

这是我目前拥有的:

<div class="container">
  <div class="col-md-12">

    <div class="col-md-3"></div>

    <div class="panel-group col-md-6 text-center" id="accordion">

      <div class="col-md-12 text-center">

        <div class="dropdown btn-group">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Choose a Section
            <span class="caret"></span>
          </button>

          <ul class="dropdown-menu">
          <li><a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Section A</a></li>
          <li><a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Section B</a></li>
          <li><a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Section C</a></li>
          </ul>
        </div>

      </div>

      <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">
        Text A
        </div>
      </div>

      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">
        Text B
        </div>
      </div>

      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">
        Text C
        </div>
      </div>

    </div>
    <div class="col-md-3"></div>
  </div>
</div>

(我希望 div 嵌套正确...我认为它们是正确的,但有时很难理解...)

如您所见,所有内容都在 ID 为 "accordion" 的 div 中。下拉选项正确打开和关闭其下方的文本部分,但即使我将其数据父级设置为“#accordion”,除非手动关闭,否则它们不会关闭。我也试过将 data-parent 放在文本块的 divs 中,但这也没有用。它看起来与我正常工作的手风琴非常相似,但分组不同,当我使用下拉菜单而不是单独的按钮时显然必须如此。

我认为这可能是稍微重组 div 或移动 id 或 data-parent 的问题,但我无法取得任何进展。除非需要自定义 Javascript 才能使其正常工作?使用下拉菜单而不是一系列按钮似乎是一个很小的变化,但它可能比看起来更复杂...

这类似于我在这里的回答:

手风琴行为取决于 panel class,面板必须是 data-parent 元素的直接子元素。

将这些规则应用到您的场景中将如下所示...

<div class="panel-group row text-center">
            <div class="col-md-12 text-center" id="accordion">
                <div class="panel">
                    <div class="dropdown btn-group">
                        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Choose a Section
                            <span class="caret"></span>
                        </button>

                        <ul class="dropdown-menu">
                            <li><a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Section A</a></li>
                            <li><a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Section B</a></li>
                            <li><a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Section C</a></li>
                        </ul>
                    </div>

                    <div id="collapse1" class="panel-collapse collapse">
                        <div class="panel-body">
                            Text A
                        </div>
                    </div>

                    <div id="collapse2" class="panel-collapse collapse">
                        <div class="panel-body">
                            Text B
                        </div>
                    </div>

                    <div id="collapse3" class="panel-collapse collapse">
                        <div class="panel-body">
                            Text C
                        </div>
                    </div>
                </div>
            </div>
        </div>

http://www.codeply.com/go/cPGVLuAh4j

另外说明,在 Bootstrap 网格中,col-* 应该始终是 row 的直接子节点。