Javascript 如果单击了可折叠元素，则折叠所有其他（可折叠）已打开的元素-引导

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

在我的网站上，我想使用一个可折叠的“主菜单”，它应该像默认的引导手风琴一样工作。我的主导航菜单是一个未排序的列表，可以折叠。每个

元素都有

数据toggle=“collapse”

属性和嵌套的

折叠类。这个很好用

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

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

上面的例子很有效。所以我知道如何使用引导中的默认手风琴。我的问题是，如前所述，我不能将此HTML结构用于我的主菜单：

• 面板组
  面板
  data parent=“#面板组的id”

因此，我需要一个变通方法，在另一个菜单点展开后关闭已经打开的菜单点。我搜索了几个小时，找到了一些JavaScript（jQuery）示例，这些示例应该可以关闭已经打开的元素。不幸的是，我所找到的例子中没有一个能帮助我解决我的问题。它们不够详细，我无法理解背后的逻辑，或者根本不起作用（是的，在提供的JS Fiddle示例中也不起作用）

---

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

我知道您搜索了答案并找到了一些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();
})

下面是全部内容

$('#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();
})