Bootstrap子菜单如何在单击子菜单2时关闭子菜单1

Question

以下是我的折叠子菜单的代码：

                <li class="sec1" data-toggle="collapse" data-target="#item3">
                    <a href="#">Item 3<span class="caret pull-right"></span></a>
                    <ul class="menu sub-menu collapse" id="item3">
                        <li><a href="#">Item 3A</a></li>
                        <li><a href="#">Item 3B</a></li>
                    </ul>
                </li>
                <li class="sec1" data-toggle="collapse" data-target="#item4">
                    <a href="#">Item 4<span class="caret pull-right"></span></a>
                    <ul class="menu sub-menu collapse" id="item4">
                        <li><a href="#">Item 4A</a></li>
                        <li><a href="#">Item 4B</a></li>
                    </ul>
                </li>

问题在于，如果我的第3项下拉菜单已经打开，当我点击第4项菜单时，第3项菜单仍然会打开。点击第4项菜单后，如何关闭第3项下拉菜单？我只想把一个项目下拉菜单打开。

Answer 1

你想要的是accordion类行为。 你可能需要重新构建你的html才能实现它。

1. 将您的列表包含在具有唯一id。
的父级中
2. 对于每个切换元素，添加一个panel类（bootstrap手风琴依赖于此）和data-parent="#parentIdHere"。

以下是更新后代码的示例：FIDDLE

注意： - 由于需要panel类，您可能需要调整它以覆盖引导样式。