1

クリックすると開くワードプレスのドロップダウンメニューを作成しようとしています。投稿を選択し、ページがその投稿を読み込むときに開いたままにする必要があります。問題は、クリック可能にするためだけにリンクを何もアンカーしない ("#") カスタム メニュー項目リンクを使用していることです。「クリック可能な第 2 レベルのタイトル項目」をクリックするとメニューが開きますが、「第 3 レベルの投稿」のリンクが機能せず、クリックするとメニューが閉じます。

HTML:

<li id="menu-item-272" class="main menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-272"><a href="#">Main menu title item</a>
<ul class="sub-menu" style="display: block;">
    <li id="menu-item-740" class="third menu-item menu-item-type-post_type menu-item-object-post menu-item-740"><a href="http://xyz.com">Post 1st lvl</a></li>
    <li id="menu-item-741" class="third menu-item menu-item-type-post_type menu-item-object-post menu-item-741"><a href="http://xyz.com">Post 1st lvl</a></li>
    <li id="menu-item-742" class="third menu-item menu-item-type-post_type menu-item-object-post menu-item-742"><a href="http://xyz.com">Post 1st lvl</a></li>
    <li id="menu-item-743" class="third menu-item menu-item-type-post_type menu-item-object-post menu-item-743"><a href="http://xyz.com">Post 1st lvl</a></li>
    <li id="menu-item-744" class="second bez menu-item menu-item-type-custom menu-item-object-custom menu-item-744"><a href="#">Clickable 2nd level title item</a>
    <ul class="sub-menu" style="display: none;">
        <li id="menu-item-288" class="third menu-item menu-item-type-taxonomy menu-item-object-category menu-item-type-post_type menu-item-object-post menu-item-288"><a href="http://xyz.com">Post 3rd lvl</a></li>
        <li id="menu-item-290" class="third menu-item menu-item-type-taxonomy menu-item-object-category menu-item-type-post_type menu-item-object-post menu-item-290"><a href="http://xyz.com">Post 3rd lvl</a></li>
        <li id="menu-item-292" class="third menu-item menu-item-type-taxonomy menu-item-object-category menu-item-type-post_type menu-item-object-post menu-item-292"><a href="http://xyz.com">Post 3rd lvl</a></li>
    </ul>
</li>
</ul>
</li>

jQuery:

$('#menu-header ul.sub-menu li.second:not(".third")').toggle(function() {
        $(this).find('ul.sub-menu:first-of-type')
            .stop(true, true).delay(50).show("slow");
    }, function(){
        $(this).find('ul.sub-menu:first-of-type')
            .stop(true, true).delay(150).animate({ "height": "hide", "opacity": "hide" }, 400 );
    });
4

1 に答える 1

2

どうぞ、この回答を使用してください。わかりやすくするためにコードを簡略化し、フィドルも更新しました。

$('ul.sub-menu').children('.second').click(function(){
    $(this).children('.sub-menu').slideToggle('slow');
}).children('ul').find('.third').click(function (event) {
    event.stopPropagation();
    console.log('hello!');
    return false;
});
于 2013-04-10T18:54:00.503 に答える