引导活动选项卡在下拉选项卡中不起作用

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';
  	console.log(my_window_location_pathname);
    // -----------------------------------------------------------------------
    $.each($('.navbar').find('li'), function() {
      console.log($(this));
      	if (my_window_location_pathname.indexOf($(this).find('a').attr('href')) > -1)
        {
        	$(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>