[原子恭一]

【お使いの 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に書いてもらいましたが、これ以上の改善は出来ませんでした。
コードを修正するか、別のアプローチはありますでしょうか？

よろしくお願いいたします。

♥ 0

いいねをした人: 居ません

[まーちゅう]

スマホのサブメニューを隠さずに、最初から表示されているようにしたい

このトピックには15件の返信、4人の参加者があり、最後にcotonoha-designにより3年、 6ヶ月前に…

snow-monkey.2inc.org

こちらの方法ではどうでしょうか？

♥ 1

いいねをした人:

[原子恭一]

まーちゅうさん、ありがとうございます。

この方法も検討して、過去トピックス探しましたが、見つけられませんでしたので、
たいへん、助かりました。

個人的にはこれで良いと思うのですが、クライアントに確認中です。

もう少し、探ってみます。

♥ 1

いいねをした人:

[キタジマ タカシ]

互換性を考えると、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 にしろ、アップデートの際の後方互換性に影響がでる可能性はあるのでご注意ください！

♥ 0

いいねをした人: 居ません

[原子恭一]

キタジマ　さん、ありがとうございました。完璧です！

positionプロパティを使って、クリック範囲を親要素全体にするとは、
ぜんぜん思いつきませんでした。

「後方互換性に影響がでる可能性はある」とのことですが、
この仕組みを理解しておけば、かりに問題出ても対処出来そうです。

ありがとうございました。感謝いたします。

♥ 1

いいねをした人:

[キタジマ タカシ]

良かったです！
解決済みということで、トピックのクローズをお願いしますm(__)m

♥ 1

いいねをした人:

[投稿者]

投稿