1

WordPress マルチサイト インストールで永続的なネットワーク全体のメニューをセットアップしようとしています。これはネットワーク ワイド メニュー プラグインを使用して実現され、非常にうまく機能します。唯一の問題はスタイリングです。これは、自動の「current-menu-item」クラスがメイン ブログの適切なメニュー リンクにのみ埋め込まれているためです。

だから私は .addClass() 関数を調べて、現在の URL に基づいてメニュー項目に追加されたクラスを取得しました。親アイテムも強調表示しようとしていることに注意してください。これが、.parentsUntil() クラスも使用した理由です。

これは私のネットワーク設定です (各ドメインは WordPress の 1 つのインスタンスに対応しています):

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.

4

1 に答える 1

1

これを試して：

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

2 行目では、要素のセットを次の 2 つの条件でフィルター処理します。

  1. ドメイン名 (this.hostname) を持つ href 属性が必要です。

  2. リンク先のドメイン名 (再び this.hostname) は、現在のページのドメイン名 (location.hostname) と一致 (==) する必要があります。

アップデート

$('#megaUber > li > a').filter(function () {
    return this.href && this.href == location.href.slice(0, -1);
}).parentsUntil('.ss-nav-menu-item-depth-0').addClass('activeMenu');
于 2013-04-24T08:18:05.897 に答える