ブートストラップのアクティブなタブがドロップダウン・タブで機能しない

Question

ナビゲーション・バーに次のHTMLがあります。

<nav class="navbar navbar-default"> 
    <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" href="#"> 
       Heading 
      </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 class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-bug" aria-hidden="true"></i>Main Link 1<span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Link 1</a></li> 
         <li><a href="#">Link 2</a></li> 
         <li><a href="#">Link 3</a></li> 
        </ul> 
       </li> 
       <li><a href="#"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>Main Link 2<span class="sr-only">(current)</span></a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-users" aria-hidden="true"></i>Main Link 3<span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Link 1</a></li> 
         <li><a href="#">Link 2</a></li> 
        </ul> 
       </li> 
       <li><a href="#"><i class="fa fa-folder-open-o" aria-hidden="true"></i>Main Link 4</a></li> 
      </ul> 
     </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 

アクティブなタブを設定するには、次のjQueryを使用します。

$(document).ready(function() { 
    console.log(window.location.pathname); 
    // ----------------------------------------------------------------------- 
    $.each($('.navbar').find('li'), function() { 
     console.log($(this)); 
     $(this).toggleClass('active', 
      window.location.pathname.indexOf($(this).find('a').attr('href')) > -1); 
    }); 
    // ----------------------------------------------------------------------- 
}); 

これは、ドロップダウンリストを持たないメインリンクで機能しています。メインリンク上でドロップダウンを使って動作させるにはどうすればよいですか？

Answer 1

私が正しく理解している場合は、クラスを子要素とルート要素の両方に追加します。右？

は次のように試してみてください。ここでは、デモ

$(document).ready(function() { 
    console.log(window.location.pathname); 
    // ----------------------------------------------------------------------- 
    $.each($('.navbar').find('li'), function() { 
     console.log($(this)); 
     if (window.location.pathname.indexOf($(this).find('a').attr('href')) > -1) 
     { 
      $(this).toggleClass('active'); 
      $(this).parent().closest("li").toggleClass('active'); 
     } 
    }); 
    // ----------------------------------------------------------------------- 
}); 

：

$(document).ready(function() { 
 
    //debug 
 
    var my_window_location_pathname = 'www.asd.com/qwe.html'; 
 
    \t console.log(my_window_location_pathname); 
 
    // ----------------------------------------------------------------------- 
 
    $.each($('.navbar').find('li'), function() { 
 
     console.log($(this)); 
 
     \t if (my_window_location_pathname.indexOf($(this).find('a').attr('href')) > -1) 
 
     { 
 
     \t $(this).toggleClass('active'); 
 
      $(this).parent().closest("li").toggleClass('active'); 
 
     } 
 
    }); 
 
    // ----------------------------------------------------------------------- 
 
});

<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> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<nav class="navbar navbar-default"> 
 
    <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" href="#"> 
 
       Heading 
 
      </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 class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-bug" aria-hidden="true"></i>Main Link 1<span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Link 1</a></li> 
 
      <li><a href="qwe.html">Link 2</a></li> 
 
      <li><a href="#">Link 3</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>Main Link 2<span class="sr-only">(current)</span></a></li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-users" aria-hidden="true"></i>Main Link 3<span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Link 1</a></li> 
 
      <li><a href="#">Link 2</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#"><i class="fa fa-folder-open-o" aria-hidden="true"></i>Main Link 4</a></li> 
 
     </ul> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container-fluid --> 
 
</nav>