Question

我创建了一个简单的可扩展菜单（带有bootstrap 3）。它工作正常，但我当时不能打开一个声音。图标永远不会显示，我可以打开菜单，但如果另一个元素打开则不会关闭。

<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>

Answer 1

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

您的HTML标记存在问题，特别是上述示例中的第6行不正确，不应该存在。否则手风琴似乎工作正常。

Bootstrap 3和折叠菜单

1 个答案: