teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問ページ内リンクがあるドロップダウンメニューの挙動について

編集履歴

質問編集履歴

4

ソースの追加

2020/01/28 07:49

投稿

eba
eba

スコア6

test CHANGED
File without changes
test CHANGED
@@ -30,6 +30,24 @@
30
30
 
31
31
  <nav class="globalNav">
32
32
 
33
+
34
+
35
+ 　　<div class="drawer"><!-- スマホ用メニュー -->
36
+
37
+ <div class="navbar_toggle">
38
+
39
+ <span class="navbar_toggle_icon"></span>
40
+
41
+ <span class="navbar_toggle_icon"></span>
42
+
43
+ <span class="navbar_toggle_icon"></span>
44
+
45
+ </div>
46
+
47
+ </div>
48
+
49
+
50
+
33
51
  <div class="menu">
34
52
 
35
53
  <ul class="nav">

3

ソースの修正

2020/01/28 07:49

投稿

eba
eba

スコア6

test CHANGED
File without changes
test CHANGED
@@ -198,14 +198,12 @@
198
198
 
199
199
  $('.menu a').on('click', function() {
200
200
 
201
- $(".menu").toggleClass('open');
201
+ $('.menu').toggleClass('open');
202
-
202
+
203
- $(".navbar_toggle").toggleClass('open');
203
+ $('.navbar_toggle').toggleClass('open');
204
204
 
205
205
  });
206
206
 
207
-
208
-
209
207
  });
210
208
 
211
209
  ```

2

ソースの追加

2020/01/28 07:46

投稿

eba
eba

スコア6

test CHANGED
File without changes
test CHANGED
@@ -178,6 +178,42 @@
178
178
 
179
179
 
180
180
 
181
+ 色々確認してると、レスポンシブでグローバルメニューを格納してるjavascriptと競合してる可能性が強まりました。
182
+
183
+
184
+
185
+ ```jquery
186
+
187
+ $(function() {
188
+
189
+ $('.navbar_toggle').on('click', function () {
190
+
191
+ $(this).toggleClass('open');
192
+
193
+ $('.menu').toggleClass('open');
194
+
195
+ });
196
+
197
+
198
+
199
+ $('.menu a').on('click', function() {
200
+
201
+ $(".menu").toggleClass('open');
202
+
203
+ $(".navbar_toggle").toggleClass('open');
204
+
205
+ });
206
+
207
+
208
+
209
+ });
210
+
211
+ ```
212
+
213
+
214
+
215
+
216
+
181
217
 
182
218
 
183
219
  ### 補足情報（FW/ツールのバージョンなど）

1

ソースの修正

2020/01/28 07:42

投稿

eba
eba

スコア6

test CHANGED
File without changes
test CHANGED
@@ -34,13 +34,13 @@
34
34
 
35
35
  <ul class="nav">
36
36
 
37
- <li><a href="#featureLink">メニュー01</a></li>
37
+ <li><a href="#link01">メニュー01</a></li>
38
38
 
39
- <li><a href="#staffLink">メニュー02</a></li>
39
+ <li><a href="#link02">メニュー02</a></li>
40
40
 
41
- <li><a href="#priceLink">メニュー03</a></li>
41
+ <li><a href="#link03">メニュー03</a></li>
42
42
 
43
- <li><a href="#mealsLink">メニュー04</a>
43
+ <li><a href="#link04">メニュー04</a>
44
44
 
45
45
  <ul class="dropMenu">
46
46
 
@@ -54,7 +54,7 @@
54
54
 
55
55
  </li>
56
56
 
57
- <li><a href="#galleryLink">メニュー05</a></li>
57
+ <li><a href="#link05">メニュー05</a></li>
58
58
 
59
59
  </ul>
60
60