jQuery - 如何在父 div 之外找到一个类并单击另一个父类的子类？

Question

我正在使用 jQuery 通过触发 $(".navbar-toggle").click() 来关闭响应式视图中的导航。但是，我找不到在单击下拉链接和单击徽标时关闭导航的方法。

由于此网络应用程序是在 Meteor 中开发的，因此页面不会重新加载，因此导航会保持展开。

问题：

1. 如何在点击下拉链接时折叠导航？
2. 如果导航已打开，如何在单击徽标时折叠导航？
3. 如何在单击右侧导航下拉链接时折叠导航？

因为.navbar-toggle 在它们各自的父 div 之外，所以我无法定位它们。

以下是我的代码：

$('.nav-link').on('click', function() {
  if ($(window).width() <= 990){
     $('.navbar-toggle').click()
  };
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default" id="top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand nav-link" href="#">
        LOGO
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li data-toggle="collapse" data-target=".nav-collapse">
          <a href="#" class="nav-link">Dashboard</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Community <span class="ti-angle-down"></span></a>
          <ul class="dropdown-menu">
            <li data-toggle="collapse" data-target=".nav-collapse"><a href="#" class="nav-link-outside">Teams</a>
            </li>
            <li data-toggle="collapse" data-target=".nav-collapse"><a href="#" class="nav-link-outside">Events</a>
            </li>
          </ul>
        </li>

        <li data-toggle="collapse" data-target=".nav-collapse" class="nav-link"><a href="#">Events</a>
        </li>


      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">User name <span class="ti-angle-down"></span></a>
          <ul class="dropdown-menu">
            <li data-toggle="collapse" data-target=".nav-collapse"><a href="#" class="nav-link">Profile settings</a>
            </li>
            <li data-toggle="collapse" data-target=".nav-collapse"><a href="#" class="nav-link">Change password</a>
            </li>
            <li data-toggle="collapse" data-target=".nav-collapse"><a href="#" id="signout" class="nav-link">Sign out</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-->
</nav>

Answer 1

你的所有观点都有效，除了一个部分有效。这就是第 3 点。How to collapse the navigation on click of the right nav dropdown links?

由于community 部分下的链接具有类nav-link-outside 而不是nav-link，所以它部分工作。所以在你的 jquery 中使用下面的选择器。

$('.nav-link,.nav-link-outside').on('click', function() {
  if ($(window).width() <= 990){
     $('.navbar-toggle').click()
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default" id="top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand nav-link" href="#">
        LOGO
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li data-toggle="collapse" data-target=".nav-collapse">
          <a href="#" class="nav-link">Dashboard</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Community <span class="ti-angle-down"></span></a>
          <ul class="dropdown-menu">
            <li data-toggle="collapse" data-target=".nav-collapse"><a href="#" class="nav-link-outside">Teams</a>
            </li>
            <li data-toggle="collapse" data-target=".nav-collapse"><a href="#" class="nav-link-outside">Events</a>
            </li>
          </ul>
        </li>

        <li data-toggle="collapse" data-target=".nav-collapse" class="nav-link"><a href="#">Events</a>
        </li>


      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">User name <span class="ti-angle-down"></span></a>
          <ul class="dropdown-menu">
            <li data-toggle="collapse" data-target=".nav-collapse"><a href="#" class="nav-link">Profile settings</a>
            </li>
            <li data-toggle="collapse" data-target=".nav-collapse"><a href="#" class="nav-link">Change password</a>
            </li>
            <li data-toggle="collapse" data-target=".nav-collapse"><a href="#" id="signout" class="nav-link">Sign out</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-->
</nav>