質問編集履歴
5
コードペンだとJSのjQueryはいらなかったので、削除しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -556,7 +556,7 @@
|
|
|
556
556
|
|
|
557
557
|
|
|
558
558
|
|
|
559
|
-
|
|
559
|
+
(function(){
|
|
560
560
|
|
|
561
561
|
var d = document,
|
|
562
562
|
|
4
javascriptを追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -550,6 +550,72 @@
|
|
|
550
550
|
|
|
551
551
|
```
|
|
552
552
|
|
|
553
|
+
|
|
554
|
+
|
|
555
|
+
// よくある質問のアコーディオン
|
|
556
|
+
|
|
557
|
+
|
|
558
|
+
|
|
559
|
+
jQuery(function(){
|
|
560
|
+
|
|
561
|
+
var d = document,
|
|
562
|
+
|
|
563
|
+
accordionToggles = d.querySelectorAll('.js-accordionTrigger'),
|
|
564
|
+
|
|
565
|
+
setAria,
|
|
566
|
+
|
|
567
|
+
setAccordionAria,
|
|
568
|
+
|
|
569
|
+
switchAccordion,
|
|
570
|
+
|
|
571
|
+
touchSupported = ('ontouchstart' in window),
|
|
572
|
+
|
|
573
|
+
pointerSupported = ('pointerdown' in window);
|
|
574
|
+
|
|
575
|
+
skipClickDelay = function(e){
|
|
576
|
+
|
|
577
|
+
e.preventDefault();
|
|
578
|
+
|
|
579
|
+
e.target.click();
|
|
580
|
+
|
|
581
|
+
}
|
|
582
|
+
|
|
583
|
+
|
|
584
|
+
|
|
585
|
+
setAriaAttr = function(el, ariaType, newProperty){
|
|
586
|
+
|
|
587
|
+
el.setAttribute(ariaType, newProperty);
|
|
588
|
+
|
|
589
|
+
};
|
|
590
|
+
|
|
591
|
+
setAccordionAria = function(el1, el2, expanded){
|
|
592
|
+
|
|
593
|
+
switch(expanded) {
|
|
594
|
+
|
|
595
|
+
case "true":
|
|
596
|
+
|
|
597
|
+
setAriaAttr(el1, 'aria-expanded', 'true');
|
|
598
|
+
|
|
599
|
+
setAriaAttr(el2, 'aria-hidden', 'false');
|
|
600
|
+
|
|
601
|
+
break;
|
|
602
|
+
|
|
603
|
+
case "false":
|
|
604
|
+
|
|
605
|
+
setAriaAttr(el1, 'aria-expanded', 'false');
|
|
606
|
+
|
|
607
|
+
setAriaAttr(el2, 'aria-hidden', 'true');
|
|
608
|
+
|
|
609
|
+
break;
|
|
610
|
+
|
|
611
|
+
default:
|
|
612
|
+
|
|
613
|
+
break;
|
|
614
|
+
|
|
615
|
+
}
|
|
616
|
+
|
|
617
|
+
};
|
|
618
|
+
|
|
553
619
|
//function
|
|
554
620
|
|
|
555
621
|
switchAccordion = function(e) {
|
3
修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,14 +1,18 @@
|
|
|
1
|
-
|
|
2
2
|
|
|
3
3
|
アコーディオンメニューの中の話です。
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
|
+
本来ならテキストが
|
|
8
|
+
|
|
9
|
+
はい。
|
|
10
|
+
|
|
7
|
-
|
|
11
|
+
ダウンロードはこちらから出来ます。
|
|
8
|
-
|
|
12
|
+
|
|
9
|
-
|
|
13
|
+
と表示されるはずなのですが、
|
|
10
|
-
|
|
14
|
+
|
|
11
|
-
なぜかaタグ以降にズレが生じます。
|
|
15
|
+
なぜかaタグ以降にズレが生じます。
|
|
12
16
|
|
|
13
17
|
一体どうすれば直るでしょうか？
|
|
14
18
|
|
|
@@ -40,13 +44,13 @@
|
|
|
40
44
|
|
|
41
45
|
<h2 aria-expanded="false" aria-controls="accordion2" class="accordion-title accordionTitle js-accordionTrigger">
|
|
42
46
|
|
|
43
|
-
|
|
47
|
+
詳しいPDF資料はありますか？</h2>
|
|
44
48
|
|
|
45
49
|
</dt>
|
|
46
50
|
|
|
47
51
|
<dd class="accordion-content accordionItem is-collapsed" id="accordion2" aria-hidden="true">
|
|
48
52
|
|
|
49
|
-
<p
|
|
53
|
+
<p>はい。<br>ダウンロードは<a href="#">こちら</a>から出来ます。</p>
|
|
50
54
|
|
|
51
55
|
</dd>
|
|
52
56
|
|
2
修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -543,3 +543,61 @@
|
|
|
543
543
|
|
|
544
544
|
|
|
545
545
|
```
|
|
546
|
+
|
|
547
|
+
```
|
|
548
|
+
|
|
549
|
+
//function
|
|
550
|
+
|
|
551
|
+
switchAccordion = function(e) {
|
|
552
|
+
|
|
553
|
+
console.log("triggered");
|
|
554
|
+
|
|
555
|
+
e.preventDefault();
|
|
556
|
+
|
|
557
|
+
var thisAnswer = e.target.parentNode.nextElementSibling;
|
|
558
|
+
|
|
559
|
+
var thisQuestion = e.target;
|
|
560
|
+
|
|
561
|
+
if(thisAnswer.classList.contains('is-collapsed')) {
|
|
562
|
+
|
|
563
|
+
setAccordionAria(thisQuestion, thisAnswer, 'true');
|
|
564
|
+
|
|
565
|
+
} else {
|
|
566
|
+
|
|
567
|
+
setAccordionAria(thisQuestion, thisAnswer, 'false');
|
|
568
|
+
|
|
569
|
+
}
|
|
570
|
+
|
|
571
|
+
thisQuestion.classList.toggle('is-collapsed');
|
|
572
|
+
|
|
573
|
+
thisQuestion.classList.toggle('is-expanded');
|
|
574
|
+
|
|
575
|
+
thisAnswer.classList.toggle('is-collapsed');
|
|
576
|
+
|
|
577
|
+
thisAnswer.classList.toggle('is-expanded');
|
|
578
|
+
|
|
579
|
+
thisAnswer.classList.toggle('animateIn');
|
|
580
|
+
|
|
581
|
+
};
|
|
582
|
+
|
|
583
|
+
for (var i=0,len=accordionToggles.length; i<len; i++) {
|
|
584
|
+
|
|
585
|
+
if(touchSupported) {
|
|
586
|
+
|
|
587
|
+
accordionToggles[i].addEventListener('touchstart', skipClickDelay, false);
|
|
588
|
+
|
|
589
|
+
}
|
|
590
|
+
|
|
591
|
+
if(pointerSupported){
|
|
592
|
+
|
|
593
|
+
accordionToggles[i].addEventListener('pointerdown', skipClickDelay, false);
|
|
594
|
+
|
|
595
|
+
}
|
|
596
|
+
|
|
597
|
+
accordionToggles[i].addEventListener('click', switchAccordion, false);
|
|
598
|
+
|
|
599
|
+
}
|
|
600
|
+
|
|
601
|
+
})();
|
|
602
|
+
|
|
603
|
+
```
|
1
修正
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
aタグ
|
|
1
|
+
aタグにズレが生じてしまいます
|
test
CHANGED
|
File without changes
|