Как выделить активный пункт меню содержащий вложенные элементы?

Question

[ligisayan]

Всем привет! Подскажите, как можно выделить активный пункт меню в моем случае? проблема еще и в том, что здесь присутствует выпадающий список - нужно, чтобы при клике на одном из пунктов выделялся его содержащий. Пробую сделать через скрипт - не выходит..

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

Comments

[ligisayan]

да, все верно. у меня ссылки относительные вида ../index.php, а window.location.pathname определяет их как index.php - может быть в этом проблема?

Answer 1

[Alex]

у вас в коде

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

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

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