Javascript 引导手动折叠

我有几个可折叠的项目，当一个可折叠的div打开时，当用户单击另一个项目打开另一个可折叠的div但前一个div没有关闭时，我面临一个问题。当用户单击打开另一个可折叠div的另一项时，如何关闭打开的可折叠div

我试过下面的方法

<li><a class="layer-item" data-toggle="collapse" href="#baseLayer" role="button" aria-expanded="false" aria-controls="baseLayer" onclick="selectLayer('base')" id="base-layer-btn" title="Base layer">Base layer</a></li>
<li><a class="layer-item" data-toggle="collapse" href="#soilLayer" role="button" aria-expanded="false" aria-controls="soilLayer" onclick="selectLayer('soil')" id="soil-layer-btn" title="Soil layers">Soil layers</a></li>

<div class="collapse" id="baseLayer">...</div>
<div class="collapse" id="soilLayer">...</div>

...
...

在我的脚本标签中

<script>
  function selectLayer(layer){
    if(layer == 'soil'){
      $('#baseLayer').collapse('hide')
    }else if(layer == 'base'){
      $('#soilLayer').collapse('hide')
    }
  }
</script>

功能选择层（层）{
如果（图层=‘土壤’）{
$（'#baseLayer'）。折叠（'隐藏'）
}否则，如果（图层=='base'）{
$（'soilLayer'）。折叠（'hide'））
}
}

但这种解决方案并没有像预期的那样正常工作。实现我所寻求的可折叠行为的最佳方法是什么？

请尝试一下

功能选择图层（图层）{
如果（图层=‘土壤’）{
$（'soilLayer'）。toggleClass（'show'））
}否则，如果（图层=='base'）{
$（'#baseLayer'）。toggleClass（'show'））
}
}

基础
土壤

简单解决方案 添加一个自定义jquery方法将解决这个问题！

/*单击任何列表项时，只有选定项具有
`show`和所有其他将自动获得'hide'类*/
$（'.layer item'）。单击（（）=>{
$（'.collapse'）。collapse（'hide'）；
});





基层
土层
，您可以在网上找到。实现起来真的很简单。您使用的是什么版本的引导？我使用此文档创建了我现在拥有的。但我的要求略有不同。例如，如果用户单击按钮A，将显示div section A。若用户点击按钮B，部分a应该隐藏并显示部分B。请将其添加到您的问题中。对我来说，这样玩会更容易删除
data toggle=“collapse”