如何關閉擴展菜單當我點擊其他菜單

Question

菜單有切換菜單，但是當我點擊其他菜單時，它不會關閉並保持打開狀態。我需要關閉擴展菜單，當我點擊其他menu.`

<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<nav> 
 
    <ul class="nav"> 
 
    <li><a data-toggle="collapse in" data-parent="#accordion" href="#">Link 1</a> 
 
    </li> 
 
    <li><a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu1" aria-expanded="false">Link 2 (toggle)</a> 
 
     <ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1"> 
 
     <li><a href="#">Link 2.1</a> 
 
     </li> 
 
     <li><a href="#">Link 2.2</a> 
 
     </li> 
 
     <li><a href="#">Link 2.3</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Link 3</a> 
 
    </li> 
 
    <li><a href="#">Link 4</a> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 1

您可以參考下面的代碼：

$(document).ready(function() { 
    $(document).click(function (event) { 
     var clickover = $(event.target); 
     var _opened = $(".navbar-collapse").hasClass("navbar-collapse in"); 
     if (_opened === true && !clickover.hasClass("navbar-toggle")) { 
      $("button.navbar-toggle").click(); 
     } 
    }); 
});