单击导航栏外部时如何关闭折叠栏？

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