如果单击可折叠元素，则折叠所有其他（可折叠）已打开的元素 - Bootstrap答案

【问题标题】：If a collapsible element is clicked, collapse all other (collapsible) already opened elements - Bootstrap如果单击可折叠元素，则折叠所有其他（可折叠）已打开的元素 - Bootstrap
【发布时间】：2016-04-01 13:00:59
【问题描述】：

我目前正在我的个人网站上工作，但遇到以下问题：

在我的网站上，我想使用一个可折叠的“主菜单”，它的作用类似于默认的 Bootstrap Accordion。我的主导航菜单是一个未排序的列表，可以折叠。每个<li> 元素都有data-toggle="collapse" 属性和嵌套的<div> 折叠类。这工作正常。

问题是，当打开另一个菜单点时，菜单点不会关闭。由于 HTML 结构（出于设计原因和我需要的其他一些功能），我无法使用 Bootstrap 默认的 Accordion 功能。

在网站的另一部分，我已经成功地使用了 Accordion 功能。在那里，我可以拥有 Bootstrap Accordion 所需的 HTML 结构，如下所示（来自我网页上此特定部分的示例代码）：

<div id="cases-list-elements-group" class="**panel-group**">

  <li class="**panel** li-main-style ul-style">

    <a class="nav-scroll list-case-style" href="#case-details-1" 
    data-toggle="collapse" **data-parent="#cases-list-elements-group"**> 
    Case 1 Details </a>

      <div id="case-details-1" class="collapse case-details">
        <div class="container container-cases">

上面的例子有效。所以我知道如何使用 Bootstrap 中的默认手风琴。我的问题是，如前所述，我的主菜单无法使用这种 HTML 结构：

面板组
面板
data-parent="#id-of-the-panel-group"

所以我需要一个解决方法，关闭已经打开的菜单点，然后展开另一个。我已经搜索了几个小时，发现了一些应该关闭已经打开的元素的 JavaScript (jQuery) 示例。不幸的是，我发现的任何一个例子都没有帮助我解决我的问题。它们不够详细，我无法理解背后的逻辑或根本不起作用（是的，在提供的 JS Fiddle 示例中效果不佳）

我知道我需要使用一些自定义 JavaScript 来做到这一点。经过几个小时的尝试，我想，这里可能有人可以提供建议。

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

我知道您搜索了答案并找到了一些 jQuery 示例，但是您是否尝试过这种方式？

基本上我所做的只是在每个列表项中隐藏一个列表。如果您也打算制作手风琴列表项链接，只需在它们周围添加一个href 标记。我确信这段代码可以缩短，但这里是 jQuery 的一半：

$('#first').hide();
$('#second').hide();
$('#third').hide();
$('#fourth').hide();

$('#colours').click(function(){
    $('#first').slideToggle();
    $('#second:visible').toggle();
    $('#third:visible').toggle();
    $('#fourth:visible').toggle();
})

$('#shapes').click(function(){
    $('#second').slideToggle();
    $('#first:visible').toggle();
    $('#third:visible').toggle();
    $('#fourth:visible').toggle();
})

$('#fruit').click(function(){
    $('#third').slideToggle();
    $('#first:visible').toggle();
    $('#second:visible').toggle();
    $('#fourth:visible').toggle();
})

$('#vehicles').click(function(){
    $('#fourth').slideToggle();
    $('#first:visible').toggle();
    $('#second:visible').toggle();
    $('#third:visible').toggle();
})

这是完整的内容JSFIDDLE

【讨论】：