选择子菜单后如何使导航栏的主菜单处于活动状态（突出显示）

Question

我有一个带有主菜单和一些子菜单的引导导航栏。我需要做的就是在单击以选中其子菜单后，使主菜单之一处于活动状态（突出显示）。例如，如果我单击以选择“对于托运人”，则“ HOW IT WORKS”应处于活动状态并突出显示。现在，如果我选择了主菜单，则只能使它处于活动状态，但是它不适用于子菜单。可能只需要在下面的代码中添加javascript或Jquery，但是我对Jquery不太熟悉。感谢您的帮助：

$(function() {
  // highlight the current nav
  $("#index a:contains('HOME')").parent().addClass('active');
  $("#shippers a:contains('SHIPPERS')").parent().addClass('active');
  $("#carriers a:contains('CARRIERS')").parent().addClass('active');
  $("#carrier_signup a:contains('First Time User Sign Up')").parent().addClass('active');
  $("#carrier_login a:contains('Current User Login')").parent().addClass('active');
  $("#about a:contains('ABOUT US')").parent().addClass('active');
  $("#contact a:contains('CONTACT US')").parent().addClass('active');
  $("#howitworks a:contains('HOW IT WORKS')").parent().addClass('active');
  $("#hiw_shippers a:contains('FOR SHIPPERS')").parent().addClass('active');
  $("#hiw_carriers a:contains('FOR CARRIERS')").parent().addClass('active');

  // make menus drop automatically with hover for dropdown menu
  $('ul.nav li.dropdown').hover(function() {
    $('.dropdown-menu', this).fadeIn();
  }, function() {
    $('.dropdown-menu', this).fadeOut('fast');
  });
})

.navbar-default {
  background-color: #0064ff;
}

.navbar-default .navbar-brand {
  color: white;
}

.navbar-default .navbar-nav>li>a {
  color: white;
}

.navbar-default .navbar-nav>li>a:hover {
  background-color: #E8E8E8;
}

.navbar {
  margin-bottom: 0;
}

.icon-bar {
  margin: -20px 0px -20px 3px;
}

.active {
  background-color: #E8E8E8;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>         <span class="icon-bar"></span>         <span class="icon-bar"></span>       </button>
      <a class="navbar-brand" href="#">&nbsp;&nbsp;America<span class="glyphicon glyphicon-star-empty"></span>Shipping Choice
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
    </div>
    <div class="collapse navbar-collapse dropdown" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="index.php">HOME</a></li>
        <li><a href="Shippers_login.php">SHIPPERS</a></li>
        <!--<li><a href="Carriers.php">CARRIERS</a></li>-->

        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">CARRIERS
                  <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="carrier_signup.php">First Time User <span class="glyphicon glyphicon-arrow-right"></span> Sign up</a></li>
            <li><a href="carrier_login.php">Current User <span class="glyphicon glyphicon-arrow-right"></span> Login</a></li>
          </ul>
        </li>

        <li><a href="about.php">ABOUT US</a></li>

        <li><a href="contact.php">CONTACT US</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">HOW IT WORKS
                    <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="howitworks_shippers.php"><span class="glyphicon glyphicon-arrow-right"></span> For Shippers</a></li>
            <li><a href="howitworks_carriers.php"><span class="glyphicon glyphicon-arrow-right"></span> For Carriers</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

您需要在悬停或单击时突出显示吗？因为，如果on click我看不出要突出其父级的任何意义。它将已经转到其他页面。

但是如果悬停。您可以将其添加到CSS。

li:hover > a {background-color: #E8E8E8;}
li:hover a:hover {background-color: #E8E8E8;}

@

如果您想on click将其添加到您的JAVASCRIPT中

$(".dropdown-menu > li > a").on("click",function(x){
    var tgt     = $(this).closest(".dropdown").children("a");
    if(!tgt.hasClass("active"))
        tgt.addClass("active");
  x.preventDefault();
});

$("li").on("mouseover",function(){
    var tgt     = $(this).children("a");
    if(tgt.hasClass("active"))
        tgt.removeClass("active");
});