如何关闭扩展菜单当我点击其他菜单

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