- このトピックには5件の返信、3人の参加者があり、最後に
により3週、 2日前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】バージョン: 28.0.2
【お使いの Snow Monkey Blocks のバージョン】バージョン 23.1.1
【お使いの Snow Monkey Editor のバージョン】バージョン 10.2.0
【お使いのブラウザ】chrome
【当該サイトのURL】https://gcltd.co.jp/### 実現したいこと
いつもお世話になっております。
クライアント案件で、お客様から、スマホのドロワー内でサブメニューを開く際に▼が小さくて、タップの際に謝って閉じてしますので、メニュー名から▼までの1行全体で展開させて欲しいと言われました（アコーディオンのように）### 発生している問題
以下のようなコードで、親メニュー1行で展開出来るようになりましたが、タップと同時にドロワー自体が閉じます。再度開くと展開されているので、半分は成功したようですが。
jQuery(document).ready(function($) {
console.log(‘カスタムJS v8: ドキュメント準備完了’);// サブメニューを持つリンクのクリック処理
$(‘.c-drawer__menu li.menu-item-has-children > a, .c-drawer__menu li.c-drawer__item–has-submenu > a’).on(‘click’, function(event) {
console.log(‘カスタムJS v8: ターゲットリンククリック検知:’, this);// デフォルト動作（遷移）キャンセル
event.preventDefault();// 対応する展開ボタンを探す
var $toggleButton = $(this).siblings(‘.c-drawer__toggle’);// 展開ボタンが見つかれば、それをクリック
if ($toggleButton.length > 0) {
console.log(‘カスタムJS v8: 展開ボタン発見、クリック実行’);
$toggleButton.trigger(‘click’);// このクリックイベントの伝播を停止
event.stopPropagation();
return false;
}
});console.log(‘カスタムJS v8: イベント設定完了’);
});### 試したこと
じつは、JSコードについて知識はなく、AIに書いてもらいましたが、これ以上の改善は出来ませんでした。
コードを修正するか、別のアプローチはありますでしょうか？よろしくお願いいたします。
Who liked: No userまーちゅうさん、ありがとうございます。
この方法も検討して、過去トピックス探しましたが、見つけられませんでしたので、
たいへん、助かりました。個人的にはこれで良いと思うのですが、クライアントに確認中です。
もう少し、探ってみます。
Who liked:
互換性を考えると、JS でやるより CSS でやるほうが良いと思うので、ちょっと CSS を書いてみました。
.c-drawer__item--has-submenu, .c-drawer__subitem--has-submenu{ position: relative; } /* トグルボタンを持っているメニューのリンクを無効化 */ .c-drawer__item--has-submenu > a, .c-drawer__subitem--has-submenu > a { pointer-events: none; } .c-drawer__item--has-submenu .c-drawer__toggle, .c-drawer__subitem--has-submenu .c-drawer__toggle{ position: static; } /* トグルボタンの疑似要素を利用して、クリック範囲をメニュー全体に広げる */ .c-drawer__item--has-submenu .c-drawer__toggle::before, .c-drawer__subitem--has-submenu .c-drawer__toggle::before { content: ''; position: absolute; inset: 0; }ドロワーやグローバルナビゲーションは CSS が濃いので、JS にしろ CSS にしろ、アップデートの際の後方互換性に影響がでる可能性はあるのでご注意ください！
Who liked: No userキタジマ さん、ありがとうございました。完璧です！
positionプロパティを使って、クリック範囲を親要素全体にするとは、
ぜんぜん思いつきませんでした。「後方互換性に影響がでる可能性はある」とのことですが、
この仕組みを理解しておけば、かりに問題出ても対処出来そうです。ありがとうございました。感謝いたします。
Who liked:
- トピック「スマホのドロワーメニューのサブメニュー展開について」には新しい返信をつけることはできません。