teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問JS　アコーディオンメニュー　カレントのクラス名を付与した部分を開く

編集履歴

質問編集履歴

3

修正

2020/01/23 02:14

投稿

crigw
crigw

スコア24

test CHANGED
@@ -1 +1 @@
1
- js制御のアコーディオンメニュー、カレントクラス名付与と付与時に初期から展開させる
1
+ JS　アコーディオンメニュー　カレントのクラス名を付与した部分を開く
test CHANGED
@@ -6,183 +6,83 @@
6
6
 
7
7
  ### やりたいこと
8
8
 
9
- js制御で動くアコーディオンメニューに対して、旧デザインのチェックボックス時動作同様の以下の動きを実現させたいのですが、修正点の予測がついても変更の仕方がわかりません。
10
-
11
- ・URLから現在地を取得して`li`にカレントのクラス名を付与`mainNavKids__item--current`
12
-
13
- ・カレントクラスは親と子どちらの`li`にもつける
14
-
15
- ・クラス名`mainNavKids__item--current`が付与された場合アコーディオンの初期値をアコーディオン展開にする
9
+ ・クラス名`current`が付与された場合、該当のアコーディオンをアコーディオン展開にする
16
10
 
17
11
 
18
12
 
19
- 数カ所触ってみましたが、クラス名は全ての`li`に付与されてしまい、アコーディオンの展開は実現できませんでした。
20
-
21
- 以下新旧のHTML+css+jsの記述です。基本的にはCSSに変更がないため、新には記載していません。
22
-
23
-
24
-
25
- ### 旧html+css+js
13
+ ### 新html
26
14
 
27
15
  ```
28
16
 
29
- <style>
17
+ <nav class="collapsibleNav">
30
18
 
31
- /*=============== ul.subNab/// accordion ===============*/
19
+ <div class="collapsibleNav__wrap">
32
20
 
33
- .mainNavBox ul.mainNav>li.mainNav__item>input.acc-subOpen { display: none; }
21
+ <ul class="mainNav">
34
22
 
35
- .mainNavBox ul.mainNav>li.mainNav__item>label.acc-unshown {
23
+ <li class="mainNav__item">
36
24
 
37
- display: block;
25
+ <a href="#" class="mainNav__item__link is-toggle-accNav">メニュー1（クリックで開く）</a>
38
26
 
39
- margin-bottom: 1px;
27
+ <ul class="mainNavKids">
40
28
 
41
- }
29
+ <li class="mainNavKids__item"><a href="./test.html" class="mainNav__item__link">サブメニュー1</a></li>
42
30
 
43
- .mainNavBox ul.mainNav>li.mainNav__item>ul.mainNavKids {
31
+ <li class="mainNavKids__item"><a href="#" class="mainNav__item__link">サブメニュー1</a></li>
44
32
 
45
- height: 0;
33
+ <li class="mainNavKids__item"><a href="#" class="mainNav__item__link">サブメニュー1</a></li>
46
34
 
47
- opacity: 0;
35
+ </ul>
48
36
 
49
- visibility: hidden;
37
+ </li>
50
38
 
51
- }
39
+ <li class="mainNav__item">
52
40
 
53
- .mainNavBox ul.mainNav>li.mainNav__item>ul.mainNavKids>li {}
41
+ <span class="is-toggle-accNav">メニュー2（クリックで開く）</span>
54
42
 
55
- .mainNavBox ul.mainNav>li.mainNav__item>ul.mainNavKids>li>a {
43
+ <ul class="mainNavKids">
56
44
 
57
- color: rgba(240,245,250,.7);
45
+ <li class="mainNavKids__item"><a href="#" class="mainNav__item__link">サブメニュー1</a></li>
58
46
 
59
- font-size: 1.3rem;
47
+ <li class="mainNavKids__item"><a href="#" class="mainNav__item__link">サブメニュー1</a></li>
60
48
 
61
- line-height: 1.4;
49
+ </ul>
62
50
 
63
- padding: 6px 12px;
51
+ </li>
64
52
 
65
- }
53
+ <li class="mainNav__item">
66
54
 
67
- .mainNavBox ul.mainNav>li.mainNav__item>ul.mainNavKids>li>a:hover { color: #fd8a39; }
55
+ <a href="#" class="">メニュー1（クリックで開く）</a>
68
56
 
69
- .mainNavBox ul.mainNav>li.mainNav__item>ul.mainNavKids>li.current>a { color: #fff; }
70
-
71
-
72
-
73
- .mainNavBox ul.mainNav>li.mainNav__item>input.acc-subOpen:checked + label.acc-unshown + ul.mainNavKids {
74
-
75
- background-color: #32373c;
76
-
77
- height: auto;
78
-
79
- opacity: 1;
80
-
81
- padding: 7px 0 8px;
82
-
83
- visibility: visible;
84
-
85
- }
86
-
87
- /*---------- accordion/// icon ----------*/
88
-
89
- .mainNavBox ul.mainNav>li.mainNav__item>label.acc-unshown::after {
90
-
91
- display: block;
92
-
93
- line-height: 2;
94
-
95
- height: 34px;
96
-
97
- width: 34px;
98
-
99
- top: 0;
100
-
101
- right: 0;
102
-
103
- position: absolute;
104
-
105
- -webkit-transition: all 0.35s;
106
-
107
- transition: all 0.35s;
108
-
109
- text-align: center;
110
-
111
- }
112
-
113
- .mainNavBox ul.mainNav>li.mainNav__item>input.acc-subOpen[type=checkbox] + label::after {
114
-
115
- content: '+';
116
-
117
- }
118
-
119
- .mainNavBox ul.mainNav>li.mainNav__item>input.acc-subOpen[type=checkbox]:checked + label::after {
120
-
121
- transform: rotate(315deg);
122
-
123
- }
124
-
125
- @media screen and (max-width:768px) {
126
-
127
- { display: none; }
128
-
129
- .unshown { display: none; }
130
-
131
- .mainNavBox { display: none; }
132
-
133
- }
134
-
135
- </style>
57
+ </li>
136
-
137
- 〜略〜
138
-
139
- <ul class="mainNav">
140
-
141
- <li class="mainNav__item">
142
-
143
- <input id="acc-subOpen-menu2" class="acc-subOpen" type="checkbox">
144
-
145
- <label class="acc-unshown" for="acc-subOpen-menu1">メニュー1</label>
146
-
147
- <ul class="mainNavKids">
148
-
149
- <li><a href="#">子メニュー1</a></li>
150
-
151
- <li><a href="#">子メニュー2</a></li>
152
58
 
153
59
  </ul>
154
60
 
155
- </li>
61
+ </div>
156
62
 
157
- <li class="mainNav__item">
158
-
159
- <input id="acc-subOpen-menu1" class="acc-subOpen" type="checkbox">
160
-
161
- <label class="acc-unshown" for="acc-subOpen-menu2">メニュー2</label>
162
-
163
- <ul class="mainNavKids">
164
-
165
- <li><a href="#">子メニュー1</a></li>
166
-
167
- <li><a href="#">子メニュー2</a></li>
168
-
169
- </ul>
63
+ </nav>
170
-
171
- </li>
172
-
173
- <li class="mainNav__item"><a href="#">メニュー3</a></li>
174
-
175
- </ul>
176
64
 
177
65
  〜略〜
178
66
 
179
67
  <script>
180
68
 
69
+ $(function(){
70
+
71
+ $(".is-toggle-accNav").on("click", function() {
72
+
73
+ $(this).next().slideToggle(500);
74
+
75
+ });
76
+
77
+ });
78
+
79
+
80
+
181
81
  //current
182
82
 
183
83
  $(function(){
184
84
 
185
- $('.js-mainNav__toggleAcc').each(function(){
85
+ $('.mainNav__item__link').each(function(){
186
86
 
187
87
  var $href = $(this).attr('href');
188
88
 
@@ -202,87 +102,7 @@
202
102
 
203
103
  });
204
104
 
205
- //current-open
206
105
 
207
- $(function(){
208
-
209
- $('.acc-subOpen', $('.current').closest('.item')).prop('checked', true).trigger('change');
210
-
211
- });
212
-
213
- </script>
214
-
215
- ```
216
-
217
- ### 新html
218
-
219
- ```
220
-
221
- <ul class="mainNav">
222
-
223
- <li class="mainNav__item">
224
-
225
- <span class="mainNav__toggleAcc js-mainNav__toggleAcc">メニュー1</span>
226
-
227
- <ul class="mainNavKids">
228
-
229
- <li class="mainNavKids__item"><a href="">サブメニュー1</a></li>
230
-
231
- <li class="mainNavKids__item"><a href="">サブメニュー1</a></li>
232
-
233
- <li class="mainNavKids__item"><a href="">サブメニュー1</a></li>
234
-
235
- </ul>
236
-
237
- </li>
238
-
239
- <li class="mainNav__item">
240
-
241
- <a href="#" class="mainNav__toggleAcc js-mainNav__toggleAcc">メニュー2</a>
242
-
243
- </li>
244
-
245
- </ul>
246
-
247
- 〜略〜
248
-
249
- <script>
250
-
251
- $(function(){
252
-
253
- $(".js-mainNav__toggleAcc").on("click", function() {
254
-
255
- $(this).next().slideToggle();
256
-
257
- });
258
-
259
- });
260
-
261
-
262
-
263
- //current
264
-
265
- $(function(){
266
-
267
- $('.js-mainNav__toggleAcc').each(function(){
268
-
269
- var $href = $(this).attr('href');
270
-
271
- if(location.href.match($href)) {
272
-
273
- $(this).parent().addClass('mainNavKids__item--current');
274
-
275
- $(this).parent().parent().parent().addClass('mainNavKids__item--current');
276
-
277
- } else {
278
-
279
- $(this).parent().removeClass('mainNavKids__item--current');
280
-
281
- }
282
-
283
- });
284
-
285
- });
286
106
 
287
107
  //current-open
288
108
 
@@ -298,21 +118,23 @@
298
118
 
299
119
  ### 完成イメージ
300
120
 
301
- 現在もしくは遷移時のページを子メニュー1とし、ロード時にメニュー1と子メニュー1に`mainNavKids__item--current`が付与され、メニュー1のアコーディオンが展開されている。
121
+ 現在もしくは遷移時のページを子メニュー1とし、ロード時にメニュー1と子メニュー1に`current`が付与され、メニュー1のアコーディオンが展開されている。
302
122
 
303
123
 
304
124
 
305
125
  ```
306
126
 
127
+ 〜略〜
128
+
307
129
  <ul class="mainNav">
308
130
 
309
- <li class="mainNav__item mainNavKids__item--current">
131
+ <li class="mainNav__item current">
310
132
 
311
133
  <span class="mainNav__toggleAcc js-mainNav__toggleAcc">メニュー1</span>
312
134
 
313
135
  <ul class="mainNavKids">
314
136
 
315
- <li class="mainNavKids__item mainNavKids__item--current"><a href="">サブメニュー1</a></li>
137
+ <li class="mainNavKids__item current"><a href="">サブメニュー1</a></li>
316
138
 
317
139
  <li class="mainNavKids__item"><a href="">サブメニュー1</a></li>
318
140
 
@@ -320,15 +142,7 @@
320
142
 
321
143
  </ul>
322
144
 
323
- </li>
145
+ 〜略〜
324
-
325
- <li class="mainNav__item">
326
-
327
- <a href="#" class="mainNav__toggleAcc js-mainNav__toggleAcc">メニュー2</a>
328
-
329
- </li>
330
-
331
- </ul>
332
146
 
333
147
  ```
334
148
 

2

文章変更

2020/01/23 02:14

投稿

crigw
crigw

スコア24

test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
 
18
18
 
19
- 数カ所触ってみましたが、クラス名の付与及びアコーディオンの展開は実現できませんでした。
19
+ 数カ所触ってみましたが、クラス名は全ての`li`に付与されてしまい、アコーディオンの展開は実現できませんでした。
20
20
 
21
21
  以下新旧のHTML+css+jsの記述です。基本的にはCSSに変更がないため、新には記載していません。
22
22
 

1

js 一部変更

2020/01/22 08:29

投稿

crigw
crigw

スコア24

test CHANGED
File without changes
test CHANGED
@@ -250,17 +250,11 @@
250
250
 
251
251
  $(function(){
252
252
 
253
- $('.js-mainNav__toggleAcc').each(function(){
253
+ $(".js-mainNav__toggleAcc").on("click", function() {
254
-
255
- $(this).on('click',function(){
254
+
256
-
257
- $("+.mainNavKids",this).slideToggle();
255
+ $(this).next().slideToggle();
258
-
259
- return false;
256
+
260
-
261
- });
257
+ });
262
-
263
- });
264
258
 
265
259
  });
266
260