追加したjQueryのイベントハンドラが動かない
popupでモバイル(スマートフォン)メニューを作成する際、アコーディオン機能のするために、jQueryを記述してもイベントハンドラが動きませんでした。
追加したい機能と動作状況
モバイル(スマートフォン)メニューの階層に、親要素をクリックしたら子階層を表示させるための、アコーディオン機能を追加。
chromeのコンソールではエラーが出ていない状態で、クリックしても何も変化なし(イベントが動かない)
イベントハンドラが動かない原因と解消方法
「ポップアップが開いた/表示されたとき」に、JavaScriptベースの要素を初期化する必要があるようです。
以下の記述でイベントが動作しました。
イベント追加 記述方法
使用法は非常に簡単です。たとえば、ポップアップで開いたイベントを追跡するなど、コールバックを使用して目的のイベントにイベントリスナーを追加(公式サイトより翻訳)。
jQuery( document ).on( 'elementor/popup/show', () => {
// 追加したい機能
} );
具体的な記述
WordPressのメニューの階層にアコーディオン機能を追加。
jQuery(document).on("elementor/popup/show", () => {
jQuery(".menu-item-has-children a").on("click", function () {
jQuery(".sub-menu").slideUp(500);
var findElm = jQuery(this).next(".sub-menu");
if (jQuery(this).hasClass("close")) {
jQuery(this).removeClass("close");
} else {
jQuery(".close").removeClass("close");
jQuery(this).addClass("close");
jQuery(findElm).slideDown(500);
}
});
});