2016-03-27 7 views
0

Wordpressテンプレートで作業していますが、そのうちの1つはヘッダーのドロップダウンメニューです。矢印をクリックして開くと、矢印をクリックして閉じることができます。しかし、リンクの1つをクリックすると、それは次のページにまだ開いたままです。あなたはそれを閉じるために矢印をクリックする必要があります。新しいページのWordPressテンプレートのドロップダウンメニューを解除するには

新しいページに移動するときにドロップダウンメニューが自動的に閉じるようにしたいと思います。ここで私のjsはナビゲーションです...私はこのコードを書かなかったので、Lyndaのチュートリアルに従っていますが、コードのどの部分が正確に何をしているか知るのに十分な経験はありません。

他の情報が必要な場合はお知らせください。

function initMainNavigation(container) { 
    // Add dropdown toggle that display child menu items. 
    container.find('.menu-item-has-children > a').after('<button class="dropdown-toggle" aria-expanded="false">' + screenReaderText.expand + '</button>'); 

// Toggle buttons and submenu items with active children menu items. 
container.find('.current-menu-ancestor > button').addClass('toggle-on'); 
container.find('.current-menu-ancestor > .sub-menu').addClass('toggled-on'); 

container.find('.dropdown-toggle').click(function(e) { 
    var _this = $(this); 
    e.preventDefault(); 
    _this.toggleClass('toggle-on'); 
    _this.next('.children, .sub-menu').toggleClass('toggled-on'); 
    _this.attr('aria-expanded', _this.attr('aria-expanded') === 'false' ? 'true' : 'false'); 
    _this.html(_this.html() === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand); 
}); 
} 

initMainNavigation($('.main-navigation')); 

// Re-initialize the main navigation when it is updated, persisting any existing submenu expanded states. 
$(document).on('customize-preview-menu-refreshed', function(e, params) { 
    if ('primary' === params.wpNavMenuArgs.theme_location) { 
     initMainNavigation(params.newContainer); 

    // Re-sync expanded states from oldContainer. 
    params.oldContainer.find('.dropdown-toggle.toggle-on').each(function() { 
     var containerId = $(this).parent().prop('id'); 
     $(params.newContainer).find('#' + containerId + ' > .dropdown-toggle').triggerHandler('click'); 
    }); 
} 
}); 

答えて

0

wordpressの作成メニューには、次のリンクを使用してください。 http://cssmenumaker.com/blog/wordpress-3-drop-down-menu-tutorial

説明書を読み、ステップバイステップで適用してください。

+0

私はこのチュートリアルを高く評価しますが、これは私が現在使用している方法とは少し異なるアプローチを使用しているようです。再び、ありがとうございますが、それは私が探していたものではありません。 –

0

私は、この質問はほぼ一歳であることを知っていますが、将来誰かがそれを必要とする場合に備えて、回答を投稿したいと考えました。

コードの次の行は、新しいページに移動したときにトグルが開いたままになっている原因です。あなたは、サブメニューの一部であるページに移動すると

// Toggle buttons and submenu items with active children menu items. 
container.find('.current-menu-ancestor > button').addClass('toggle-on'); 
container.find('.current-menu-ancestor > .sub-menu').addClass('toggled-on'); 

は、これらの行は、自動的にそのページの適切なトグルボタンと親のサブメニューに「トグルの」クラスを追加します。これらの行をコメントアウトすると、新しいページに移動するとサブメニューが閉じます。

関連する問題