teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

クリックに反応する原因を特定

2020/08/23 12:07

投稿

Daregada
Daregada

スコア11990

answer CHANGED
@@ -1,9 +1,21 @@
1
1
  > 1.ハンバーガーメニューが閉じている状態の時にリンクが押せてしまう件についてはGoogleでも検索しましたが解決策が見当たりませんでした。
2
2
 
3
+ 失礼、以前反応しないと書きましたが、ハンバーガーボタンが表示される状態にしてからクリックしたら反応しました。
3
- WindowsのChromeやEdge、Firefoxは再現ませんでした。つまりバーガーメニュー開いときだけメニューが反応、閉じている(opacityが0なってい)状態はホバーどの反応もしません
4
+ 原因すが、**opacityを0にて透明になっていてもonclickイベ拾ってしまうめ**です。同時にvisibilityもhiddenに変更してくださ。表示すさいには、opacityを100だけでなく、visibilityvisibleに変更てください
4
5
 
6
+ ```CSS
7
+ nav.globalMenuSp {
8
+ (略)
5
- 動作を確認しているOSやブラウザーを明記してください。
9
+ visibility: hidden;
10
+ }
6
11
 
12
+ nav.globalMenuSp.active {
13
+ opacity: 100;
14
+ visibility: visible;
15
+ }
16
+ ```
17
+
18
+
7
19
  > 2.リンクをクリック後、ハンバーガーメニューを閉じる方法を探し、下記のソースコードでおそらく実現可能ではないかと判断しました。しかし、ソースコードの入力場所が違うのか、どこに入れても目標とする動きが無かったので困っています。
8
20
 
9
21
  こちらは単なる打ち間違いです(**menuがmanuになっている**)。修正したものを、提示されているひとつめのJavaScriptコードの`jQuery(function() { ... }`の中に配置してください。