我想在WordPress多站点安装上设置永久性的网络范围菜单。这是通过使用Network wide menu plugin实现的,并且工作得很好。唯一的问题是造型,因为自动“当前菜单项”类只在主博客上嵌入到适当的菜单链接中。jQuery addClass基于URL的菜单项(WordPress持久性网络菜单)
所以我研究了.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菜单标记
<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.
我想有一个语法错误。你在'if'(href.indexOf('http://domain.com)!= -1)'' – anpsmn 2013-04-25 09:48:44
'中缺少'''。不幸的是你是对的,但它没有解决问题。有没有可以用于此的完全不同的方法? – Serena 2013-04-25 18:38:44