如何在单击导航栏外部时关闭折叠的酒吧？

Question

我在我的网站中有一个嵌套的导航栏，并且它已经可以工作，但是，我想在栏外单击时关闭折叠的栏。

下面是javascript代码，我有：

$(document).ready(function() { 
 
    $('#nav li').click(function() { 
 
    //slide up all the link lists 
 
    $(this).children('ul').slideToggle(); 
 
    }) 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="collapse navbar-collapse navbar-right" role="navigation"> 
 
    <ul id="nav" class="nav navbar-nav"> 
 
    <li class="current"><a href="#body">Home</a> 
 
    </li> 
 
    <li><a href="#">About</a> 
 
     <ul> 
 
     <li><a href="#aboutus">Link1</a> 
 
     </li> 
 
     <li><a href="#">Link2</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Etc</a> 
 
     <ul> 
 
     <li><a href="#">Link1</a> 
 
     </li> 
 
     <li><a href="#">Link2</a> 
 
     </li> 
 
     <li><a href="#">Link3</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Etc2</a> 
 
     <ul> 
 
     <li><a href="#">Link1</a> 
 
     </li> 
 
     <li><a href="#">Link2</a> 
 
     </li> 
 
     <li><a href="#">Link3</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#contact">Contact</a> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 1

您可以使用此代码

$('body').on('click touchstart', function(e) { 
        if ($(".classname").is(":visible")) { 
         if ($(e.target).closest(".classname").length == 0 && !$(e.target).hasClass('active')) { 
          closeMobileMenu(menuobj); 
         } 
        } 
       }); 

Answer 2

大约是这样的内容：

$(document).click(function(event) { 
    if(!$(event.target).closest('#nav').length) { 
    $('#nav li').children('ul').slideToggle(); 
    } 
});