javascript - Bootstrap Collapse.js 开关隐藏/显示菜单

Question

遇到 Bootstrap 崩溃的问题。我有 2 个菜单项，带有下拉折叠。我正在尝试交替/切换它们，这样我就不会同时看到它们。我试过使用 'toggle:false' 但这似乎不适用于 bootstrap。

请参阅codepen进行工作演示。目前正在使用 data- 标签来创建功能。

我想知道 DOM 是否将折叠功能视为 2 个独立的事物，因此不会将它们关联在一起。

所以我有

<div class="search-bar>...</div>
<div class="collapse" id="collapseExample">...</div>
<div class="collapse" id="collapseFilter">...</div>

在搜索栏内，我有 2 个触发折叠的 anchor 元素。然后是一个不相关的下拉列表。

 <a id="search-button" data-toggle="collapse" href="#collapseExample">
    <span class="icon-search"></span>Search
 </a> <!--Simplified -->

所以我不确定为什么两个下拉折叠元素都会下降。我希望它像 accordion style 一样工作

提前致谢。

Answer 1

你可以像这样强制隐藏其他菜单:

$("#search-button").click(function() {
    $('#collapseFilter').collapse('hide');
});

$("#filter-button").click(function() {
    $('#collapseExample').collapse('hide');
});

参见 JsFiddle你的示范。 希望对你有帮助，谢谢