Menu 引导3和折叠菜单

我创建了一个简单的可扩展菜单（使用Bootstrap3）。它工作正常，但我不能一次只打开一个声音。图标从未显示，我可以打开菜单，但如果另一个元素打开，它不会关闭

<ul class="nav">
<li class="nav-header"> 
  <a href="#" data-toggle="collapse" data-target="#MenuEurope">Europe <i class="glyphicon glyphicon-angle-down"></i></a>            
  <ul style="list-style: none;" class="collapse" id="MenuEurope">
   <li><a href="/austria">Austria</a></li>  
  </li>
  </ul>
</li>

<li class="nav-header">
 <a href="#" data-toggle="collapse" data-target="#MenuNorth-America">North America <i class="glyphicon glyphicon-angle-down"></i></a>                       
  <ul style="list-style: none;" class="collapse" id="MenuNorth-America">
     <li><a href="/canada">Canada</a></li>
     <li><a href="/united-states">United States</a></li>
  </ul>
</li>

</ul> 

这是我正在使用的js代码：

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script>
 $(document).ready(function() {     

    $('[data-toggle=collapse]').click(function(){   
        // toggle icon
        $(this).find("i").toggleClass("icon-angle-right icon-angle-down");  
    });

    $('.collapse').on('show', function (e) {  
        // hide open menus
        $('.collapse').each(function(){
        if ($(this).hasClass('in')) {
            $(this).collapse('toggle');
        }
        });

    })

 });

</script>

$（文档）.ready（函数（）{
$（'[data toggle=collapse]'）。单击（函数（）{
//切换图标
$（this.find（“i”）.toggleClass（“图标角度向右图标角度向下”）；
});
$（'.collapse'）。在（'show'，函数（e）{
//隐藏打开的菜单
$（'.collapse'）。每个（函数（）{
if（$（this）.hasClass（'in'））{
$（this.collapse（'toggle'）；
}
});
})
});

由于您的类不正确，因此图标未显示。没有“角度”图标，我猜你指的是箭头？此外，切换类的JS也不正确匹配

---

您的HTML标记有问题，特别是上面示例中的第6行不正确，不应该出现。否则手风琴似乎工作得很好。

谢谢你的回答，是的，我是说箭头。第6行只是一个错误，因为在stackoverflow中编辑了这里的代码。手风琴很好用，但我不能一次只打开一个“菜单声音”。您提到了js和类的一个问题。你能解释一下问题出在哪里吗？非常感谢当您通过jQuery切换类时，当它应该匹配您的HTML时，您使用“icon-”，例如“glyphicon-”。您是对的。现在我唯一不能解决的问题是我打开了所有的子菜单。你说手风琴很好用。你一次只打开一个声音吗？我不知道你说“声音”时指的是什么，但我有你的答案：如果你想一次只打开一个声音，你需要将所有声音都包装在父元素中。然后，每个手风琴都应该有一个“数据父对象”属性，并带有父对象的选择器。参见文档/示例：非常感谢，所有元素都是解决方案。