Выделите родительское меню также на дочерней странице

У меня есть простое многоуровневое меню и скрипт, который выделяет пункт меню независимо от того, является ли он родительским или дочерним меню.

В приведенном ниже примере, когда я нахожусь на дочерней странице, он изменит только цвет дочерней страницы, в то время как я также хочу изменить цвет или его родительский элемент.

Я пробовал несколько вещей, но это не работает так, как предполагалось.

Вот копия того, что у меня есть. В случае, если это не сработает, вот фрагмент кода:

jQuery(document).ready(function() {
  var url = window.location.href;
  $('#cssmenu a[href="' + url + '"]').addClass('active-menu');

  // Will also work for relative and absolute hrefs
  $('#cssmenu a').filter(function() {
    return this.href == url;
    $(this).parents("li a").addClass('active-menu');
  }).addClass('active-menu');

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cssmenu">
  <div id="menu-button"></div>
  <ul>
    <li><a href="/en/about-us/">About Us</a>
    </li>
    <li class="has-sub">
      <span class="submenu-button"></span><a href="#">Gallery </a>
      <ul>
        <li><a href="/en/photo-gallery/" class="active-menu">Photo Gallery</a>
        </li>
        <li><a href="/en/video-gallery">Video Gallery</a>
        </li>
        <li><a href="/en/instagram-gallery">Instagram Gallery</a>
        </li>
      </ul>
    </li>
    <li><a href="/en/news/">News</a>
    </li>
    <li><a href="/en/contact/">Contact</a>
    </li>
  </ul>
</div>

ОБНОВЛЕНИЕ

Вот мой новый код, но он работает, но также выделяет другие ссылки:

$('#cssmenu a').filter(function() {
  $(this).parents("li.has-sub").find('a:first').addClass('active-menu');
  return this.href == url;
}).addClass('active-menu');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cssmenu">
  <div id="menu-button"></div>
  <ul>
    <li><a href="/en/about-us/">About Us</a>
    </li>
    <li class="has-sub">
      <span class="submenu-button"></span><a href="#">Gallery </a>
      <ul>
        <li><a href="/en/photo-gallery/" class="active-menu">Photo Gallery</a>
        </li>
        <li><a href="/en/video-gallery">Video Gallery</a>
        </li>
        <li><a href="/en/instagram-gallery">Instagram Gallery</a>
        </li>
      </ul>
    </li>
    <li><a href="/en/news/">News</a>
    </li>
    <li><a href="/en/contact/">Contact</a>
    </li>
  </ul>
</div>


javascript menu html jquery css
person Learning    schedule 04.10.2015    source источник
comment
Ваше перо не работает, так как туда не добавлено jquery. Вот обновленный перо а также в этом filter $('#cssmenu a').filter(function () { в самой первой строке у вас есть оператор return. Так что все, что ниже, не будет работать... Я изменил то же самое в Pen, указанном выше..   -  person Guruprasad J Rao    schedule 04.10.2015
comment
Ваши разрывы скрипта ничего не делают   -  person Learning    schedule 04.10.2015
comment
Так было, когда ты дал ссылку на свою ручку, братан.. Я просто добавил jquery и переместил return statement..   -  person Guruprasad J Rao    schedule 04.10.2015
comment
Я не уверен, что с CodePEn, сценарий, который я предоставил, работает, но не меняет класс для родительского меню в случае, если дочерняя страница выбрана   -  person Learning    schedule 04.10.2015
comment
Смотрите, это не addClass, потому что у вас есть return statement внутри filter, который просто вернет выполнение обратно и не будет выполнять ничего, что к нему прикреплено. Так что addClass в #cssmenu a не будет работать..   -  person Guruprasad J Rao    schedule 04.10.2015
comment
В этом случае вы тоже хотите, чтобы «Галерея» стала красной? Обратите внимание - это внутри элемента span! Кроме того, вы должны настроить таргетинг на .active-class (и найти родителя, если он есть), а не на полное меню....   -  person sinisake    schedule 04.10.2015
comment
Вы хотите такое поведение? codepen.io/anon/pen/WQpgPq   -  person sinisake    schedule 04.10.2015
comment
@nevermind, да, но в этом случае, когда я удаляю класс «активное меню» из дочернего элемента, он ломается. На самом деле он должен добавить класс active-menu в дочернее меню, а затем и в родительское меню. В моем примере класс статичен, поэтому ваш пример работает иначе, он ломается   -  person Learning    schedule 04.10.2015
comment
Хорошо... не могу протестировать в codepen, дайте мне несколько минут...   -  person sinisake    schedule 04.10.2015
comment
Я заставил его работать с небольшими изменениями в вашем коде `$('#cssmenu a').filter(function () { $(this).parents(li.has-sub).find('a:first').addClass ('active-menu'); вернуть this.href == url; }).addClass('active-menu');`   -  person Learning    schedule 04.10.2015
comment
@nevermind, пожалуйста, проигнорируйте мой последний комментарий, так как он глючит и оставляет выбранными все родительские классы   -  person Learning    schedule 04.10.2015

Ответы (1)


arrow_upward
1
arrow_downward

Я думаю, это то, что вы были после.

var $menu = $("#cssmenu");
//Get the anchor based on the page URL
var $current = $menu.find('a').filter(function() {
    return location.href.indexOf(this.href) > -1;
    //Or (whatever works)
    //return location.href === this.href;
});
//Add it's parent's anchor
$current = $current.add($current.closest("li.has-sub").find(' > a'));
//Set the desired class
$current.addClass('active-menu');

Вот демонстрация в том же духе.

person lshettyl    schedule 04.10.2015