teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問アコーディオンメニューが半開きになってしまいます。

編集履歴

質問編集履歴

3

javascriptとcssのインデントを直しました

2021/01/04 11:40

投稿

takawork
takawork

スコア95

test CHANGED
File without changes
test CHANGED
@@ -524,8 +524,6 @@
524
524
 
525
525
  pointerSupported = ('pointerdown' in window);
526
526
 
527
-
528
-
529
527
  skipClickDelay = function(e){
530
528
 
531
529
  e.preventDefault();
@@ -548,64 +546,62 @@
548
546
 
549
547
  case "true":
550
548
 
551
- setAriaAttr(el1, 'aria-expanded', 'true');
549
+ setAriaAttr(el1, 'aria-expanded', 'true');
552
-
550
+
553
- setAriaAttr(el2, 'aria-hidden', 'false');
551
+ setAriaAttr(el2, 'aria-hidden', 'false');
554
-
552
+
555
- break;
553
+ break;
556
554
 
557
555
  case "false":
558
556
 
559
- setAriaAttr(el1, 'aria-expanded', 'false');
557
+ setAriaAttr(el1, 'aria-expanded', 'false');
560
-
558
+
561
- setAriaAttr(el2, 'aria-hidden', 'true');
559
+ setAriaAttr(el2, 'aria-hidden', 'true');
562
-
560
+
563
- break;
561
+ break;
564
562
 
565
563
  default:
566
564
 
567
- break;
565
+ break;
568
-
566
+
569
- }
567
+ }
568
+
569
+ };
570
+
571
+ //function
572
+
573
+ switchAccordion = function(e) {
574
+
575
+ console.log("triggered");
576
+
577
+ e.preventDefault();
578
+
579
+ var thisAnswer = e.target.parentNode.nextElementSibling;
580
+
581
+ var thisQuestion = e.target;
582
+
583
+ if(thisAnswer.classList.contains('is-collapsed')) {
584
+
585
+ setAccordionAria(thisQuestion, thisAnswer, 'true');
586
+
587
+ } else {
588
+
589
+ setAccordionAria(thisQuestion, thisAnswer, 'false');
590
+
591
+ }
592
+
593
+ thisQuestion.classList.toggle('is-collapsed');
594
+
595
+ thisQuestion.classList.toggle('is-expanded');
596
+
597
+ thisAnswer.classList.toggle('is-collapsed');
598
+
599
+ thisAnswer.classList.toggle('is-expanded');
600
+
601
+ thisAnswer.classList.toggle('animateIn');
570
602
 
571
603
  };
572
604
 
573
- //function
574
-
575
- switchAccordion = function(e) {
576
-
577
- console.log("triggered");
578
-
579
- e.preventDefault();
580
-
581
- var thisAnswer = e.target.parentNode.nextElementSibling;
582
-
583
- var thisQuestion = e.target;
584
-
585
- if(thisAnswer.classList.contains('is-collapsed')) {
586
-
587
- setAccordionAria(thisQuestion, thisAnswer, 'true');
588
-
589
- } else {
590
-
591
- setAccordionAria(thisQuestion, thisAnswer, 'false');
592
-
593
- }
594
-
595
- thisQuestion.classList.toggle('is-collapsed');
596
-
597
- thisQuestion.classList.toggle('is-expanded');
598
-
599
- thisAnswer.classList.toggle('is-collapsed');
600
-
601
- thisAnswer.classList.toggle('is-expanded');
602
-
603
-
604
-
605
- thisAnswer.classList.toggle('animateIn');
606
-
607
- };
608
-
609
605
  for (var i=0,len=accordionToggles.length; i<len; i++) {
610
606
 
611
607
  if(touchSupported) {

2

javascriptを追記

2021/01/04 11:39

投稿

takawork
takawork

スコア95

test CHANGED
File without changes
test CHANGED
@@ -508,144 +508,122 @@
508
508
 
509
509
  ```
510
510
 
511
- jQuery(function () {
512
-
513
- 'use strict';
514
-
515
-
516
-
517
- document.addEventListener("touchstart", function () {}, false);
518
-
519
- jQuery(function () {
520
-
521
-
522
-
523
- jQuery('body').wrapInner('<div class="wsmenucontainer" />');
524
-
525
- jQuery('<div class="overlapblackbg"></div>').prependTo('.wsmenu');
526
-
527
-
528
-
529
- jQuery('#wsnavtoggle').click(function () {
530
-
531
- jQuery('body').toggleClass('wsactive');
532
-
533
- });
534
-
535
-
536
-
537
- jQuery('.overlapblackbg').click(function () {
538
-
539
- jQuery("body").removeClass('wsactive');
540
-
541
- });
542
-
543
-
544
-
545
- jQuery('.wsmenu > .wsmenu-list > li').has('.sub-menu').prepend('<span class="wsmenu-click"><i class="wsmenu-arrow"></i></span>');
546
-
547
- jQuery('.wsmenu > .wsmenu-list > li').has('.wsmegamenu').prepend('<span class="wsmenu-click"><i class="wsmenu-arrow"></i></span>');
548
-
549
-
550
-
551
- jQuery('.wsmenu-click').click(function () {
552
-
553
- jQuery(this).toggleClass('ws-activearrow')
554
-
555
- .parent().siblings().children().removeClass('ws-activearrow');
556
-
557
- jQuery(".wsmenu > .wsmenu-list > li > .sub-menu, .wsmegamenu").not(jQuery(this).siblings('.wsmenu > .wsmenu-list > li > .sub-menu, .wsmegamenu')).slideUp('slow');
558
-
559
- jQuery(this).siblings('.sub-menu').slideToggle('slow');
560
-
561
- jQuery(this).siblings('.wsmegamenu').slideToggle('slow');
562
-
563
- });
564
-
565
-
566
-
567
- jQuery('.wsmenu > .wsmenu-list > li > ul > li').has('.sub-menu').prepend('<span class="wsmenu-click02"><i class="wsmenu-arrow"></i></span>');
568
-
569
- jQuery('.wsmenu > .wsmenu-list > li > ul > li > ul > li').has('.sub-menu').prepend('<span class="wsmenu-click02"><i class="wsmenu-arrow"></i></span>');
570
-
571
-
572
-
573
- jQuery('.wsmenu-click02').click(function () {
574
-
575
- jQuery(this).children('.wsmenu-arrow').toggleClass('wsmenu-rotate');
576
-
577
- jQuery(this).siblings('li > .sub-menu').slideToggle('slow');
578
-
579
- });
580
-
581
-
582
-
583
- jQuery(window).on('resize', function () {
584
-
585
-
586
-
587
- if (jQuery(window).outerWidth() < 992) {
588
-
589
- jQuery('.wsmenu').css('height', jQuery(this).height() + "px");
590
-
591
- jQuery('.wsmenucontainer').css('min-width', jQuery(this).width() + "px");
592
-
593
- } else {
594
-
595
- jQuery('.wsmenu').removeAttr("style");
596
-
597
- jQuery('.wsmenucontainer').removeAttr("style");
598
-
599
- jQuery('body').removeClass("wsactive");
600
-
601
- jQuery('.wsmenu > .wsmenu-list > li > .wsmegamenu, .wsmenu > .wsmenu-list > li > ul.sub-menu, .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu, .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu').removeAttr("style");
602
-
603
- jQuery('.wsmenu-click').removeClass("ws-activearrow");
604
-
605
- jQuery('.wsmenu-click02 > i').removeClass("wsmenu-rotate");
606
-
607
- }
608
-
609
-
610
-
611
- });
612
-
613
-
614
-
615
- jQuery(window).trigger('resize');
616
-
617
-
618
-
619
- });
620
-
621
-
622
-
623
- //Mobile Search Box
624
-
625
- jQuery(window).on("load", function () {
626
-
627
- jQuery('.wsmobileheader .wssearch').on("click", function () {
628
-
629
- jQuery(this).toggleClass("wsopensearch");
630
-
631
- });
632
-
633
- jQuery("body, .wsopensearch .wscloseicon").on("click", function () {
634
-
635
- jQuery(".wssearch").removeClass('wsopensearch');
636
-
637
- });
638
-
639
- jQuery(".wssearch, .wssearchform form").on("click", function (e) {
640
-
641
- e.stopPropagation();
642
-
643
- });
644
-
645
- });
646
-
647
-
648
-
649
- }());
511
+ jQuery(function(){
512
+
513
+ var d = document,
514
+
515
+ accordionToggles = d.querySelectorAll('.js-accordionTrigger'),
516
+
517
+ setAria,
518
+
519
+ setAccordionAria,
520
+
521
+ switchAccordion,
522
+
523
+ touchSupported = ('ontouchstart' in window),
524
+
525
+ pointerSupported = ('pointerdown' in window);
526
+
527
+
528
+
529
+ skipClickDelay = function(e){
530
+
531
+ e.preventDefault();
532
+
533
+ e.target.click();
534
+
535
+ }
536
+
537
+
538
+
539
+ setAriaAttr = function(el, ariaType, newProperty){
540
+
541
+ el.setAttribute(ariaType, newProperty);
542
+
543
+ };
544
+
545
+ setAccordionAria = function(el1, el2, expanded){
546
+
547
+ switch(expanded) {
548
+
549
+ case "true":
550
+
551
+ setAriaAttr(el1, 'aria-expanded', 'true');
552
+
553
+ setAriaAttr(el2, 'aria-hidden', 'false');
554
+
555
+ break;
556
+
557
+ case "false":
558
+
559
+ setAriaAttr(el1, 'aria-expanded', 'false');
560
+
561
+ setAriaAttr(el2, 'aria-hidden', 'true');
562
+
563
+ break;
564
+
565
+ default:
566
+
567
+ break;
568
+
569
+ }
570
+
571
+ };
572
+
573
+ //function
574
+
575
+ switchAccordion = function(e) {
576
+
577
+ console.log("triggered");
578
+
579
+ e.preventDefault();
580
+
581
+ var thisAnswer = e.target.parentNode.nextElementSibling;
582
+
583
+ var thisQuestion = e.target;
584
+
585
+ if(thisAnswer.classList.contains('is-collapsed')) {
586
+
587
+ setAccordionAria(thisQuestion, thisAnswer, 'true');
588
+
589
+ } else {
590
+
591
+ setAccordionAria(thisQuestion, thisAnswer, 'false');
592
+
593
+ }
594
+
595
+ thisQuestion.classList.toggle('is-collapsed');
596
+
597
+ thisQuestion.classList.toggle('is-expanded');
598
+
599
+ thisAnswer.classList.toggle('is-collapsed');
600
+
601
+ thisAnswer.classList.toggle('is-expanded');
602
+
603
+
604
+
605
+ thisAnswer.classList.toggle('animateIn');
606
+
607
+ };
608
+
609
+ for (var i=0,len=accordionToggles.length; i<len; i++) {
610
+
611
+ if(touchSupported) {
612
+
613
+ accordionToggles[i].addEventListener('touchstart', skipClickDelay, false);
614
+
615
+ }
616
+
617
+ if(pointerSupported){
618
+
619
+ accordionToggles[i].addEventListener('pointerdown', skipClickDelay, false);
620
+
621
+ }
622
+
623
+ accordionToggles[i].addEventListener('click', switchAccordion, false);
624
+
625
+ }
626
+
627
+ })();
650
628
 
651
629
  ```

1

コードを変更

2021/01/04 11:00

投稿

takawork
takawork

スコア95

test CHANGED
File without changes
test CHANGED
@@ -24,7 +24,19 @@
24
24
 
25
25
  ```
26
26
 
27
+ <section class="question-content">
28
+
29
+ <div class="question-content-wrap">
30
+
31
+ <div class="question-content-wrap-ttl">
32
+
33
+ <h1>よくある質問(FAQ)</h1>
34
+
35
+ </div>
36
+
37
+ <div class="question-content-wrap-list">
38
+
27
- <div class="question-content-wrap-list-container">
39
+ <div class="question-content-wrap-list-container">
28
40
 
29
41
  <div class="accordion">
30
42
 
@@ -78,47 +90,107 @@
78
90
 
79
91
  </div>
80
92
 
93
+ </div>
94
+
95
+ </div>
96
+
97
+ </section>
98
+
81
99
  ```
82
100
 
83
101
  ```
84
102
 
103
+ .question-content {
104
+
105
+ height: auto;
106
+
107
+ min-height: 600px;
108
+
109
+ background-color: white;
110
+
111
+ border: 1vw solid #5BCBAC;
112
+
113
+ padding-top: 30px;
114
+
115
+ }
116
+
117
+
118
+
119
+ .question-content-wrap {
120
+
121
+ max-width: 1080px;
122
+
123
+ margin: 0 auto;
124
+
125
+ }
126
+
127
+
128
+
129
+ .question-content-wrap-ttl {
130
+
131
+ text-align: center;
132
+
133
+ }
134
+
135
+
136
+
137
+ .question-content-wrap-ttl h1 {
138
+
139
+ font-weight: bold;
140
+
141
+ font-size: 42px;
142
+
143
+ margin-bottom: 0px;
144
+
145
+ }
146
+
147
+
148
+
85
149
  .accordion dl,
86
150
 
87
151
  .accordion-list {
88
152
 
89
- border:1px solid #ddd;
153
+ border: 1px solid #ddd;
154
+
90
-
155
+ }
156
+
157
+
158
+
159
+ .accordion dl:after,
160
+
91
- &:after {
161
+ .accordion-list:after {
92
-
162
+
93
- content: "";
163
+ content: "";
94
-
164
+
95
- display:block;
165
+ display: block;
96
-
166
+
97
- height:1em;
167
+ height: 1em;
98
-
168
+
99
- width:100%;
169
+ width: 100%;
100
-
170
+
101
- background-color:darken(#38cc70, 10%);
171
+ background-color: #2ba659;
102
-
172
+
103
- }
173
+ }
104
-
105
- }
174
+
175
+
106
176
 
107
177
  .accordion dd,
108
178
 
109
179
  .accordion__panel {
110
180
 
111
- background-color:#eee;
181
+ background-color: #eee;
112
-
182
+
113
- font-size:1em;
183
+ font-size: 1em;
114
-
184
+
115
- line-height:1.5em;
185
+ line-height: 1.5em;
116
-
186
+
117
- }
187
+ }
188
+
189
+
118
190
 
119
191
  .accordion p {
120
192
 
121
- padding:1em 2em 1em 2em;
193
+ padding: 1em 2em 1em 2em;
122
194
 
123
195
  }
124
196
 
@@ -126,135 +198,173 @@
126
198
 
127
199
  .accordion {
128
200
 
129
- position:relative;
201
+ position: relative;
130
-
202
+
131
- background-color:#eee;
203
+ background-color: #eee;
132
-
204
+
133
- }
205
+ }
206
+
207
+
134
208
 
135
209
  .question-content-wrap-list-container {
136
210
 
137
- max-width:960px;
211
+ max-width: 960px;
138
-
212
+
139
- margin:0 auto;
213
+ margin: 0 auto;
140
-
214
+
141
- padding:2em 0 2em 0;
215
+ padding: 2em 0 2em 0;
142
-
216
+
143
- }
217
+ }
218
+
219
+
144
220
 
145
221
  .accordionTitle,
146
222
 
147
223
  .accordion__Heading {
148
224
 
149
- background-color:#38cc70;
150
-
151
- text-align:center;
152
-
153
- font-weight:700;
154
-
155
- padding:2em;
156
-
157
- display:block;
158
-
159
- text-decoration:none;
160
-
161
- color:#fff;
162
-
163
- transition:background-color 0.5s ease-in-out;
164
-
165
- border-bottom:1px solid darken(#38cc70, 5%);
166
-
167
- &:before {
168
-
169
- content: "+";
170
-
171
- font-size:2.5em;
172
-
173
- line-height:0.5em;
174
-
175
- float: right;
176
-
177
- transition: transform 0.3s ease-in-out;
178
-
179
- }
180
-
181
- &:hover {
182
-
183
- background-color:darken(#38cc70, 10%);
184
-
185
- }
186
-
187
- &:after {
188
-
189
- content: "Q";
190
-
191
- font-size:2.5em;
192
-
193
- line-height:0.5em;
194
-
195
- float: left;
196
-
197
- transition: transform 0.3s ease-in-out;
198
-
199
- }
200
-
201
- }
202
-
203
- .accordionTitleActive,
225
+ background-color: #38cc70;
226
+
227
+ text-align: center;
228
+
229
+ font-weight: 700;
230
+
231
+ padding: 2em;
232
+
233
+ display: block;
234
+
235
+ text-decoration: none;
236
+
237
+ color: #fff;
238
+
239
+ -webkit-transition: background-color 0.5s ease-in-out;
240
+
241
+ transition: background-color 0.5s ease-in-out;
242
+
243
+ border-bottom: 1px solid #30bb64;
244
+
245
+ }
246
+
247
+
248
+
249
+ .accordionTitle:before,
250
+
251
+ .accordion__Heading:before {
252
+
253
+ content: "+";
254
+
255
+ font-size: 2.5em;
256
+
257
+ line-height: 0.5em;
258
+
259
+ float: right;
260
+
261
+ -webkit-transition: -webkit-transform 0.3s ease-in-out;
262
+
263
+ transition: -webkit-transform 0.3s ease-in-out;
264
+
265
+ transition: transform 0.3s ease-in-out;
266
+
267
+ transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
268
+
269
+ }
270
+
271
+
272
+
273
+ .accordionTitle:hover,
274
+
275
+ .accordion__Heading:hover {
276
+
277
+ background-color: #2ba659;
278
+
279
+ }
280
+
281
+
282
+
283
+ .accordionTitle:after,
284
+
285
+ .accordion__Heading:after {
286
+
287
+ content: "Q";
288
+
289
+ font-size: 2.5em;
290
+
291
+ line-height: 0.5em;
292
+
293
+ float: left;
294
+
295
+ -webkit-transition: -webkit-transform 0.3s ease-in-out;
296
+
297
+ transition: -webkit-transform 0.3s ease-in-out;
298
+
299
+ transition: transform 0.3s ease-in-out;
300
+
301
+ transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
302
+
303
+ }
304
+
305
+
306
+
307
+ .accordionTitleActive,
204
308
 
205
309
  .accordionTitle.is-expanded {
206
310
 
207
- background-color:darken(#38cc70, 10%);
311
+ background-color: #2ba659;
208
-
209
- &:before {
312
+
210
-
211
- transform:rotate(-225deg);
212
-
213
- }
313
+ }
314
+
315
+
316
+
214
-
317
+ .accordionTitleActive:before,
318
+
319
+ .accordionTitle.is-expanded:before {
320
+
321
+ -webkit-transform: rotate(-225deg);
322
+
323
+ transform: rotate(-225deg);
324
+
215
- }
325
+ }
326
+
327
+
216
328
 
217
329
  .accordionItem {
218
330
 
219
- height:auto;
331
+ height: auto;
220
-
332
+
221
- overflow:hidden;
333
+ overflow: hidden;
222
-
223
- //SHAME: magic number to allow the accordion to animate
334
+
224
-
225
-
226
-
227
- max-height:50em;
335
+ max-height: 50em;
336
+
228
-
337
+ -webkit-transition: max-height 1s;
338
+
229
- transition:max-height 1s;
339
+ transition: max-height 1s;
230
-
231
-
232
-
233
-
234
-
235
- @media screen and (min-width:48em) {
340
+
236
-
237
- max-height:15em;
238
-
239
- transition:max-height 0.5s
240
-
241
-
242
-
243
- }
341
+ }
342
+
343
+
344
+
244
-
345
+ @media screen and (min-width: 48em) {
346
+
245
-
347
+ .accordionItem {
348
+
246
-
349
+ max-height: 15em;
350
+
247
-
351
+ -webkit-transition: max-height 0.5s;
352
+
248
-
353
+ transition: max-height 0.5s;
354
+
249
- }
355
+ }
356
+
250
-
357
+ }
251
-
358
+
359
+
252
360
 
253
361
  .accordionItem.is-collapsed {
254
362
 
255
- max-height:0;
363
+ max-height: 0;
256
-
364
+
257
- }
365
+ }
366
+
367
+
258
368
 
259
369
  .no-js .accordionItem.is-collapsed {
260
370
 
@@ -262,17 +372,57 @@
262
372
 
263
373
  }
264
374
 
375
+
376
+
265
377
  .animateIn {
266
378
 
379
+ -webkit-animation: accordionIn 0.45s normal ease-in-out both 1;
380
+
267
- animation: accordionIn 0.45s normal ease-in-out both 1;
381
+ animation: accordionIn 0.45s normal ease-in-out both 1;
268
-
382
+
269
- }
383
+ }
384
+
385
+
270
386
 
271
387
  .animateOut {
272
388
 
389
+ -webkit-animation: accordionOut 0.45s alternate ease-in-out both 1;
390
+
273
- animation: accordionOut 0.45s alternate ease-in-out both 1;
391
+ animation: accordionOut 0.45s alternate ease-in-out both 1;
274
-
392
+
275
- }
393
+ }
394
+
395
+
396
+
397
+ @-webkit-keyframes accordionIn {
398
+
399
+ 0% {
400
+
401
+ opacity: 0;
402
+
403
+ -webkit-transform: scale(0.9) rotateX(-60deg);
404
+
405
+ transform: scale(0.9) rotateX(-60deg);
406
+
407
+ -webkit-transform-origin: 50% 0;
408
+
409
+ transform-origin: 50% 0;
410
+
411
+ }
412
+
413
+ 100% {
414
+
415
+ opacity: 1;
416
+
417
+ -webkit-transform: scale(1);
418
+
419
+ transform: scale(1);
420
+
421
+ }
422
+
423
+ }
424
+
425
+
276
426
 
277
427
  @keyframes accordionIn {
278
428
 
@@ -280,17 +430,49 @@
280
430
 
281
431
  opacity: 0;
282
432
 
433
+ -webkit-transform: scale(0.9) rotateX(-60deg);
434
+
283
- transform:scale(0.9) rotateX(-60deg);
435
+ transform: scale(0.9) rotateX(-60deg);
436
+
284
-
437
+ -webkit-transform-origin: 50% 0;
438
+
285
- transform-origin: 50% 0;
439
+ transform-origin: 50% 0;
286
440
 
287
441
  }
288
442
 
289
443
  100% {
290
444
 
291
- opacity:1;
445
+ opacity: 1;
446
+
292
-
447
+ -webkit-transform: scale(1);
448
+
293
- transform:scale(1);
449
+ transform: scale(1);
450
+
451
+ }
452
+
453
+ }
454
+
455
+
456
+
457
+ @-webkit-keyframes accordionOut {
458
+
459
+ 0% {
460
+
461
+ opacity: 1;
462
+
463
+ -webkit-transform: scale(1);
464
+
465
+ transform: scale(1);
466
+
467
+ }
468
+
469
+ 100% {
470
+
471
+ opacity: 0;
472
+
473
+ -webkit-transform: scale(0.9) rotateX(-60deg);
474
+
475
+ transform: scale(0.9) rotateX(-60deg);
294
476
 
295
477
  }
296
478
 
@@ -300,21 +482,25 @@
300
482
 
301
483
  @keyframes accordionOut {
302
484
 
303
- 0% {
485
+ 0% {
304
-
486
+
305
- opacity: 1;
487
+ opacity: 1;
488
+
306
-
489
+ -webkit-transform: scale(1);
490
+
307
- transform:scale(1);
491
+ transform: scale(1);
308
-
492
+
309
- }
493
+ }
310
-
494
+
311
- 100% {
495
+ 100% {
312
-
496
+
313
- opacity:0;
497
+ opacity: 0;
498
+
314
-
499
+ -webkit-transform: scale(0.9) rotateX(-60deg);
500
+
315
- transform:scale(0.9) rotateX(-60deg);
501
+ transform: scale(0.9) rotateX(-60deg);
316
-
502
+
317
- }
503
+ }
318
504
 
319
505
  }
320
506