jQuery addClass к пунктам меню на основе URL-адреса (меню сети с постоянным доступом WordPress)

Question

Я пытаюсь настроить постоянное сетевое меню на многостраничной установке WordPress. Это было достигнуто с использованием Network wide menu plugin и работает очень хорошо. Единственная проблема заключается в стилизации, потому что автоматический класс «текущий-меню-элемент» встроен только в соответствующую ссылку меню в основном блоге.

Итак, я просмотрел функцию .addClass(), чтобы добавить классы в элементы меню на основе текущего URL, и это то, к чему я пришел. Имейте в виду, что я также пытаюсь выделить родительские элементы, поэтому я также использовал класс .parentsUntil().

Это моя настройка сети (каждый домен, соответствующий одному экземпляру WordPress):

domain.com 
blog1.domain.com 
blog1.domain.com 
blog1.domain.com 

Это мой JQuery код:

jQuery(function() { 
jQuery('#megaUber ul li').removeClass('activeMenu'); 
var href = window.location.href; 
if (href.indexOf('http://domain.com) != -1) { 
    jQuery('#megaUber a').parentsUntil('.ss-nav-menu-item-depth-0').addClass('activeMenu'); 
} else if (href.indexOf("http://blog1.domain.com") != -1) { 
    jQuery('#megaUber li a[href="'+href+'"]').parentsUntil('.ss-nav-menu-item-depth-0').addClass('activeMenu'); 
} else if (href.indexOf("http://blog2.domain.com") != -1) { 
    jQuery('#megaUber li a[href="'+href+'"]').parentsUntil('.ss-nav-menu-item-depth-0').addClass('activeMenu'); 
} else if (href.indexOf("http://blog3.domain.com") != -1) { 
    jQuery('#megaUber li a[href="'+href+'"]').parentsUntil('.ss-nav-menu-item-depth-0').addClass('activeMenu'); 
} 
}); 

HTML меню Markup

<div id="megaMenu"> 
<ul id="megaUber" class="megaMenu" data-theme-location="primary"> 
<li id="menu-item-20" class="nav-cgroupe menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor mega-with-sub ss-nav-menu-item-1 ss-nav-menu-item-depth-0 ss-nav-menu-mega ss-nav-menu-mega-alignCenter ss-nav-menu-with-desc"> 
    <a href="http://domain.com">domain.com</a> 
    <ul class="sub-menu sub-menu-1" style="display: none;"> 
    <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page ss-nav-menu-item-depth-1"> 
    <a href="http://domain.com/link1">Link1</a> 
    </li> 
    <li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page ss-nav-menu-item-depth-1"> 
    <a href="http://domain.com/link2">Link2</a> 
    </li> 
    <li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page ss-nav-menu-item-depth-1"> 
    <a href="http://domain.com/link3">Link3</a> 
    </li> 
    </ul> 
    </li> 
    <li id="menu-item-26" class="nav-cconseil menu-item menu-item-type-custom menu-item-object-custom mega-with-sub ss-nav-menu-item-2 ss-nav-menu-item-depth-0 ss-nav-menu-mega ss-nav-menu-mega-alignCenter ss-nav-menu-with-desc"> 
    <a href="http://blog1.domain.com">blog1.domain.com</a> 
    <ul class="sub-menu sub-menu-1" style="display: none;"> 
    <li id="menu-item-53" class="menu-item menu-item-type-custom menu-item-object-custom ss-nav-menu-item-depth-1"> 
     <a href="http://blog1.domain.com/link1">Link1</a> 
    </li> 
    <li id="menu-item-54" class="menu-item menu-item-type-custom menu-item-object-custom ss-nav-menu-item-depth-1"> 
     <a href="http://blog1.domain.com/link2">Link2</a> 
    </li> 
    <li id="menu-item-55" class="menu-item menu-item-type-custom menu-item-object-custom ss-nav-menu-item-depth-1"> 
     <a href="http://blog1.domain.com/link3">Link3</a> 
    </li> 
    </ul> 
    </li> 
    </ul> 
</div> 

Я искал это много разных способов и просто не могу понять это. Кто-нибудь знает, как это достичь?

Спасибо, C.

Answer 1

Попробуйте это:

$('#megaUber li a').filter(function() { 
    return this.href && this.href == location.href; 
}).parentsUntil('.ss-nav-menu-item-depth-0').addClass('activeMenu'); 

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

1. Они должны иметь HREF атрибут с доменное имя (this.hostname).

2. Доменное имя, на которое они ссылаются (опять же, this.hostname), должно соответствовать (==) доменному имени текущей страницы (location.hostname).

UPDATE

$('#megaUber > li > a').filter(function() { 
    return this.href && this.href == location.href.slice(0, -1); 
}).parentsUntil('.ss-nav-menu-item-depth-0').addClass('activeMenu');