Hello! Tell me, how can I highlight the active menu item in my case? the problem is also in the fact that there is a drop-down list here - it is necessary that when clicking on one of the items, it is highlighted containing it. How can this be implemented?

$('.nav.navbar-nav li a[href="' + window.location.pathname + '"]').parent().addClass('activenav'); 
  .dropdown:hover > .dropdown-menu { display: block; opacity: 0.8; } .dropdown .dropdown-menu { display: block; opacity: 0; -moz-transition: all 800ms ease; -webkit-transition: all 800ms ease; -o-transition: all 800ms ease; -ms-transition: all 800ms ease; transition: all 800ms ease; } .dropdown-menu>li>a { padding: 8px 20px; border-bottom: 1px solid #ccc; } .dropdown-menu>.last>a { border: none; } 
 <div class="nav-wrapper"> <ul class="nav navbar-nav"> <li class="active"> <a href="../index.php">ГЛАВНАЯ</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"></a> <ul class="dropdown-menu"> <li> <a href="../"></a> </li> <li> <a href="../"></a> </li> <li> <a href="../"></a> </li> <li class="last"> <a href="../"></a> </li> </ul> <!-- end dropdown-menu --> </li> </ul> </div>

  • Need precisely when you click? Then there can not do without JavaScript. In general, clarify the question - it is not very clear what is needed and how it should work. - VeroLom
  • Yes, when you click on the selected menu item, it is highlighted active. Java will go too - Bob
  • I tried through the script - it does not work .. $ ('. nav.navbar-nav li a [href = "' + window.location.pathname + '"]'). parent (). addClass ('activenav'); - John
  • window.location.pathname shows a link of the form index.php, and I have all the relative links of the form ../index.php - maybe this is the problem? - Vasya

1 answer 1

You can walk up the element tree using the .parent() and .prev() methods:

 $('.navbar-nav .dropdown>ul>li>a').click(function() { $(this).parent().parent().prev().addClass('activenav'); }) 
 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); .activenav { background: orange; } .dropdown:hover > .dropdown-menu { display: block; opacity: 0.8; } .dropdown .dropdown-menu { display: block; opacity: 0; -moz-transition: all 800ms ease; -webkit-transition: all 800ms ease; -o-transition: all 800ms ease; -ms-transition: all 800ms ease; transition: all 800ms ease; } .dropdown-menu>li>a { padding: 8px 20px; border-bottom: 1px solid #ccc; } .dropdown-menu>.last>a { border: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <div class="nav-wrapper"> <ul class="nav navbar-nav"> <li class="active"> <a href="#">ГЛАВНАЯ</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Содержит вложенные элементы</a> <ul class="dropdown-menu"> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li class="last"><a href="#"></a></li> </ul><!-- end dropdown-menu --> </li> </ul> </div>