How to highlight the active menu item containing nested items?

Question

css

Hello! Tell me, how can I highlight the active menu item in my case? The problem is also that there is a drop-down list here - it is necessary that when you click on one of the items, its containing one is highlighted. I try to do it through the script - it doesn't work..

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

Answer 1

у вас в коде
при клике на ссылку во вложенном списке класс "activenav" будет добавляться к li, который содержит данную ссылку.
Если вам необходимо добавить класс "activenav" к li, который содержит вложенный список то надо видоизменить код следующим образом:

$('.nav.navbar-nav li li a[href="' + window.location.pathname + '"]').parents('.nav.navbar-nav > li').addClass('activenav');