FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

【Shopifyスマホ表示】ドロップダウンメニューでのページ内リンク、リンクタップでメニューを閉じる方法は?

【Shopifyスマホ表示】ドロップダウンメニューでのページ内リンク、リンクタップでメニューを閉じる方法は?

e-charity
訪問者
1 0 0

自分でスクリプト書き直せば何とかなると思いつつ、能力低く時間が掛かりそうなので教えてください。。

Riseのテーマを使っていまして、メニュー設定でTOPページにおいてページ内リンクをさせています。

 

ページ内リンク自体は簡単に、カスタマイズページで「カスタマイズされたLiquid」を差し込んで「<div id="〇〇〇">」を入れてジャンプ先を作ってます。

 

ですが、スマホ表示のドロップダウンメニューになった際に同一ページ内リンクだとタップしてもメニュー表示が消えないことに困っています。

メニューの「×」ボタンを押せば、ページ自体は既に指定箇所にジャンプ済みです。

 

スマホでドロップダウンメニュー表示の時に、リンクタップでメニューが閉じるコードと、どこに追記or書き換えれば良いかお分かりの方がいらっしゃったら教えてください。

1件の返信1

Jizo_Inagaki
Shopify Partner
1100 410 716

あまりお勧めはしませんが、おそらく以下のような方法でも対応できるのではと思います。

  • 該当のページ内リンクにクリックをトリガーにしたイベントを作成し、クリックを検知したら、メニューを閉じるボタンに対しclickメソッドを実行する

参考:

https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/click

 

 

以上ですが、試作したわけではないので動かない場合は申し訳ありません。

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。