0

私はWordpressとwp_nav_menu関数を使用しています。私はWordpressバックエンドで次のようなサンプルメニューを作成しました：

  • メニュー項目1
  • メニュー項目2
    • サブメニュー項目
  • メニュー項目3

サブメニューは、親または親の子のページにある場合にのみ表示されるようにしたいと思います。

私はこれについてどうやって行くのかわかりません。CSS / jqueryで十分だと思いますが、私はどんな解決策も取ります。

これが私が現在取り組んでいるページです。

編集：混乱して申し訳ありません-私はロールオーバーメニューを望んでいません、私はそれを静的にしたいです。親ページを表示しているときに、サブメニュー（子）を表示したい。親ページを表示していないときは、子リンクを表示したくありません。

4

4 に答える 4

0

これは、CSSのみを使用することで実現できます。これは、可能であれば、Javascriptを使用するよりも優先されます。

HTML：

<ul class="top">
    <li>first</li>
    <li>second
      <ul class="sub">
         <li>sub-first</li>
         <li>sub-second</li>
      </ul>
    </li>
    <li>third</li>
 </ul>

CSS：

ul ul.sub {
  display: none;
}

ul.top > li:hover > ul {
  color:red;
  display:block;
}
于 2012-12-13T16:05:45.610 に答える
0

どうぞ。シンプルに (そして) ばかにする。これはまさにあなたが要求したことを行います--親ページでない限りサブメニューを非表示にします。

$(function(){
   $('.sub-menu').hide(); //Hide sub menu by default
   $('.current-menu-item').children('.sub-menu')​.show();​ //Show sub menu if parent selected
});
于 2012-12-13T16:24:45.660 に答える
0

これをJavaScriptで試してください：

$(function(){
    $("#menu-main a[href='" + window.location.pathname + "']").next().addClass('opened');
});

そしてcssで：

ul.opened {
    display:block;
}
于 2012-12-13T15:59:34.577 に答える
0

これを試して：

$(function(){
   $('.sub-menu').hide();
   $('.menu-item').click(function(){
       $('.sub-menu').hide();
       $(this).find('.sub-menu').show();
   });
});
于 2012-12-13T15:56:41.197 に答える