Bootstrap Collapse.js切换菜单的隐藏/显示

Bootstrap Collapse.js Switch Hide/Show for menu

本文关键字：隐藏 显示 菜单 Collapse js Bootstrap      更新时间：2023-09-26

出现自举崩溃问题。我有两个菜单项，带有下拉折叠。我正在试着交替/切换它们，这样我就不会同时看到它们了。我已经尝试过使用'toggle:false'，但它似乎不适用于bootstrap。

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

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

所以我有

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

在搜索栏中，我有两个触发崩溃的锚元素。然后是一个不相关的下拉列表。

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

所以我不知道为什么两个下拉折叠元素都会掉下来。我希望它能像手风琴式一样工作

提前谢谢。

您可以强制隐藏其他菜单，如下所示：

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

请参阅演示的JsFiddle我希望它能有所帮助，谢谢

相关文章：