1

メインメニュー項目とサブメニュー項目を含むサイドバーメニューを備えたシンプルなWordpressテーマがあります。メニューはすべてのページに表示されます。メニューのレンダリング方法は次のとおりです。

<li id="menu-item-55" class="menu-item "><a href="?page_id=22">Main Menu Item 1</a></li>
<li id="menu-item-120" class="menu-item "><a href="#">Main Menu Item 2</a>
<ul class="sub-menu">
    <li id="menu-item-119" class="menu-item"><a href="?page_id=101">Sub Menu Item 1</a></li>
    <li id="menu-item-118" class="menu-item"><a href="?page_id=104">Sub Menu Item 2</a></li>
    <li id="menu-item-117" class="menu-item"><a href="?page_id=109">Sub Menu Item 3</a></li>
</ul>
</li>
<li id="menu-item-53" class="menu-item "><a href="?page_id=26">Main Menu Item 3/a></li>

サブメニュー項目を切り替えるために、jQueryの簡単なビットを使用しています。

    $(document).ready(function() {
        $("#menu-item-120").click(function() {
            $('.sub-menu').slideToggle('medium');
        });
    });

これは、1つの小さな問題がある私の要件には基本的に問題ありません。ページが読み込まれるときに、最初にサブメニューを非表示にする必要があります。ページの読み込み時にjQueryを使用してメニュー項目を非表示にすると、メニューが短時間表示されますが、これは受け入れられません。

問題を追加するには、理想的には、サブページの1つが表示されている場合、サブメニューは常に表示される必要があります。物事を機能させるためだけにIDなどをハードコーディングできてうれしいです。ヒントをいただければ幸いです。

4

2 に答える 2

3

Dejo Dekic が提案するように、CSS を使用してこれを行う必要があります。または、ここに hide() を追加することもできます:

$(document).ready(function() {
    $(".sub-menu").hide();
    $("#menu-item-120").click(function() {
        $('.sub-menu').slideToggle('medium');
    });
});

CSSのやり方

.sub-menu { display: none; }
于 2012-11-28T15:40:27.240 に答える
0

2番目の部分で提案できるハックは次のとおりです。

header.php (通常、メニューを定義/ロードする場所) で、

    0.v) Set a css (as above) to hide all the sub-menus by default.
    i) Check if the page is a sub-page (http://mattvarone.com/wordpress/wordpress-check-page-parent/)
    ii) If Yes, set a class in the submenu for this page to show it.
        For this, you may have to change the naming convention of ids of the sub-menu items.
       They may be named as menu-item-<PageId>. In that case you may just add this to show (only) this submenu already : $('menu-item' + currentPageId).parent().show(); <-- Submenus will be enabled via javascript.
于 2012-11-28T16:26:08.543 に答える