jQuery - 如何在父div外部找到一個類並單擊另一個父類的子類？

Question

我使用jQuery通過觸發$(".navbar-toggle").click()來關閉響應視圖中的導航。但是，我無法找到關閉導航的方法，點擊下拉鍊接並點擊徽標。

由於這個網絡應用程序已開發流星頁面不重新加載，因此導航仍然展開。

問題：

1. 如何崩潰的下拉鍊接的點擊導航？
2. 如何導航打開時點擊徽標摺疊導航？
3. 如何摺疊右側導航下拉鍊接點擊導航？

as .navbar-toggle在他們各自的父母divs之外，我無法定位他們。

下面是我的代碼：

$('.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>