0

いくつかのナビゲーションを備えた WordPress サイトをセットアップしています。各親ナビゲーション リンクには、サブ メニューが含まれています。

疑似コードでやりたいことは次のとおりです。

  • 現在のページの場合、現在のページのサブメニューを表示します。

しかし

  • 現在のページであっても、別の親リンクがホバーされている場合は、代わりにそのサブメニューを表示します。ホバー状態がなくなったら、現在のページのサブメニューに戻ります。

現時点で私はこれを持っています：

Jクエリ

    <script type="text/javascript">
    jQuery(document).ready(function($){
    $(".sub-menu").hide();
    $(".current_page_item .sub-menu").show();
    });
    </script>

これにより、すべてのページの現在のページのサブメニューが正常に表示されますが、親リンクがホバーされている場合に別のサブメニューを表示する方法がわかりません。

サブメニューはまったく同じスペースを占めるため、ホバー時に現在のページのサブメニューリンクを非表示にする必要があります。

誰か助けてください。

前もって感謝します。

HTML

    <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="http://localhost:81/pps/">Home</a></li>
    <li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-16 current_page_item menu-item-34"><a href="http://localhost:81/pps/?page_id=16">Our Services</a>
    <ul class="sub-menu" style="display: block;">
        <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="http://localhost:81/pps/?page_id=18">Services Sub Page One</a></li>
        <li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37"><a href="http://localhost:81/pps/?page_id=20">Services Sub Page Two</a></li>
        <li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35 no-cross"><a href="http://localhost:81/pps/?page_id=22">Services Sub Page Three</a></li>
    </ul>
    </li>
    <li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-38"><a href="http://localhost:81/pps/?page_id=24">Why Us?</a>
    <ul class="sub-menu" style="display: block;">
        <li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46"><a href="http://localhost:81/pps/?page_id=44">Subpage of Why Us?</a></li>
        <li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50 no-cross"><a href="http://localhost:81/pps/?page_id=48">Another Subpage Of Why Us?</a></li>
    </ul>
4

3 に答える 3

3

探しているものは次のとおりです。

$( "li.menu-item" ).hover(function() {  // mouse enter
    $( this ).find( " > .sub-menu" ).show(); // display immediate child

}, function(){ // mouse leave
    if ( !$(this).hasClass("current_page_item") ) {  // check if current page
        $( this ).find( ".sub-menu" ).hide(); // hide if not current page
    }
});
于 2013-11-05T21:50:00.170 に答える
1

テーマに追加のCSSを使用して、25個でこれを達成しました。これは他のテーマでも機能する可能性があります。

基本的に、デフォルトでサブメニューを非表示にし、親メニュー項目をホバーするとメニューが表示されます。

テーマの追加 CSS に追加します。

/*make the menu sub-menu items drop down on mouse hover */
ul.sub-menu{ display: none; }

ul.menu li.menu-item-has-children:hover > ul.sub-menu{
    display: block;
}
于 2020-08-14T18:44:17.663 に答える