Question

无法找到解决此问题的任何内容;它似乎很简单，但我还没有能够让它发挥作用。

基本上，我只想要一个普通的手风琴，除了按下一系列按钮来扩展文本面板，我希望从一个下拉列表中选择选项。我已经有了这个工作，但现在我无法弄清楚如何应用data-parent属性，因此一次只能打开1个面板。

我一直在寻找正常的手风琴代码，并尝试将相同的概念应用到我的下拉列表中，但不同的结构意味着我无法复制和粘贴相关代码而且我只是不确定数据父母如何与手风琴合作的细节。

这是我到目前为止所做的：

＆＃13;

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

＆＃13;

（我希望这些div正确嵌套......我认为它们确实存在但有时难以遵循......）

正如你所看到的，它都在一个id为＆＃34;手风琴＆＃34;的div里面。下拉选项正确打开和关闭其下方的文本部分，但即使我将其数据父级设置为＆＃34;＃accordion＆＃34;，除非手动关闭，否则它们不会关闭。我已经尝试将数据父级放在文本块中。 div也是，但那也没有用。它看起来与我的普通手风琴非常相似，但分组不同，当我使用下拉菜单而不是单独的按钮时，显然必须这样。

我认为这可能是重新组织div的问题，或者是移动身份或数据父母，但我还没有取得任何进展。除非需要自定义Javascript才能使其正常工作？使用下拉菜单而不是一系列按钮似乎是一个小小的改变，但也许它比看起来更复杂......

Answer 1

这与我在这里的答案相似：https://stackoverflow.com/a/19426220/171456

手风琴行为取决于panel类，面板必须是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的直接子项。

Bootstrap Accordions - 如何在使用Dropdown时仅保持1个面板打开？

1 个答案: