wordpressのカスタムメニューをjqueryで開閉したい！

wordpressのサイドバーにカスタムメニューを置いたとき、
ネストしているメニューの親にマウスオーバーすると子が開くようにしたかった
というのが今回の話題。

※実際にはUXを考慮してマウスエンターイベントに変更しています。

実際に生成されるHTMLはこんな感じ。

<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-has-children menu-item-120">
    <a>親</a>
    <ul>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-149">子</li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-150">子</li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-160">子</li>
    </ul>
</li>

親のliにマウスエンターすると中身のulが表示され、再度親部分のみマウスエンターすると子が閉じる、ということがやりたかったのですが、中身のulにマウスエンターしても開閉してしまうので、中身のulのマウスエンターイベントで何もさせないようにしました。

jQuery(function($) {
	$("li.menu-item-has-children").mouseenter(
		function(){
			if ($(this).children("ul.sub-menu").is(":hidden")) {
				$(this).children("ul").slideDown();
			} else {
				$(this).children("ul").slideUp();
			}
		}
	);

        //↓これで子要素の動作をキャンセル
	$("li.menu-item-has-children ul").mouseenter(
		function(){
			return false;
		}
	);

});

このようなネスト関係がある場合、子要素のイベントが親要素に伝播するイベントバブリングが発生するので、適宜カットする必要があります。

バブリングの対処には以下の方法があり、適宜使い分ける必要があります。

・EventObject.preventDefault()
対象要素のイベントをキャンセル

・EventObject.stopPropagation()
親要素への伝播をキャンセル

・return false
上記２つの両方を行う