質問編集履歴
2
なんどもすみません。コード訂正しました。
test
CHANGED
File without changes
|
test
CHANGED
@@ -88,7 +88,7 @@
|
|
88
88
|
|
89
89
|
$(function () {
|
90
90
|
|
91
|
-
$('
|
91
|
+
$('gnav-accordion--item').click(function () {
|
92
92
|
|
93
93
|
|
94
94
|
|
@@ -134,11 +134,11 @@
|
|
134
134
|
|
135
135
|
|
136
136
|
|
137
|
-
gnav
|
137
|
+
gnav-accordion--itemクラス(li)をクリックした際にその下層にあるaccordion__lowクラス(ul要素)の中身がオープンされ、gnav-accordion--itemのアイコンも切り替わるコードを書きました。
|
138
138
|
|
139
139
|
|
140
140
|
|
141
|
-
現状、「レーザー飛蚊症治療」(.gnav
|
141
|
+
現状、「レーザー飛蚊症治療」(.gnav-accordion--item)をクリックすると、「眼球注射治療(加齢黄斑変性など)」(.gnav-accordion--item)の下層メニューも同時に開いて、閉じてをしてしまいます。
|
142
142
|
|
143
143
|
|
144
144
|
|
1
コードの訂正を行いました。
test
CHANGED
File without changes
|
test
CHANGED
@@ -12,13 +12,13 @@
|
|
12
12
|
|
13
13
|
```HTML
|
14
14
|
|
15
|
-
|
16
|
-
|
17
|
-
<nav class="gnav">
|
15
|
+
<nav class="gnav">
|
18
16
|
|
19
17
|
<ul class="gnav__list">
|
20
18
|
|
21
|
-
<li class="gnav__list--item"><a href="../
|
19
|
+
<li class="gnav__list--item"><span class="gnav__list--item-varL"></span><a href="../doctor.html">院長ご挨拶・医師紹介<span class="gnav__list--item-var"></span></a></li>
|
20
|
+
|
21
|
+
<li class="gnav__list--item"><a href="../visit.html">専門性の高い治療<span class="gnav__list--item-var"></span><i class="fas fa-angle-down gnav__over-list--arrow-down gnav__over-list--arrow"></i></a>
|
22
22
|
|
23
23
|
<ul class="gnav-accordion">
|
24
24
|
|
@@ -36,11 +36,17 @@
|
|
36
36
|
|
37
37
|
</ul>
|
38
38
|
|
39
|
+
<!--accordion__low-->
|
40
|
+
|
39
41
|
</li>
|
40
42
|
|
41
|
-
<
|
43
|
+
<!--gnav-accordion--item-->
|
42
44
|
|
45
|
+
<li class="gnav-accordion--item"><i class="fas fa-chevron-right gnav__over-list--arrow"></i>眼球注射治療<br>
|
46
|
+
|
47
|
+
(加齢黄斑変性など)
|
48
|
+
|
43
|
-
|
49
|
+
<ul class="accordion__low">
|
44
50
|
|
45
51
|
<li class="accordion__low-item"><a href="#">ダミー記事</a></li>
|
46
52
|
|
@@ -50,11 +56,29 @@
|
|
50
56
|
|
51
57
|
<li class="accordion__low-item"><a href="#">ダミー記事</a></li>
|
52
58
|
|
53
|
-
</ul>
|
59
|
+
</ul>
|
60
|
+
|
61
|
+
<!--accordion__low-->
|
62
|
+
|
63
|
+
</li>
|
64
|
+
|
65
|
+
<!--gnav-accordion--item-->
|
66
|
+
|
67
|
+
</ul>
|
68
|
+
|
69
|
+
<!--gnav-accordion-->
|
70
|
+
|
71
|
+
</li>
|
72
|
+
|
73
|
+
<!--gnav__list--item-->
|
54
74
|
|
55
75
|
</ul>
|
56
76
|
|
77
|
+
<!--gnav__list-->
|
78
|
+
|
57
79
|
</nav>
|
80
|
+
|
81
|
+
<!--gnav-->
|
58
82
|
|
59
83
|
```
|
60
84
|
|
@@ -62,49 +86,49 @@
|
|
62
86
|
|
63
87
|
```jQuery
|
64
88
|
|
65
|
-
$(function() {
|
89
|
+
$(function () {
|
66
90
|
|
67
|
-
|
91
|
+
$('.gnav__list--item').click(function () {
|
68
92
|
|
69
93
|
|
70
94
|
|
71
|
-
|
95
|
+
//メニューバーが閉じているなら
|
72
96
|
|
73
|
-
|
97
|
+
if ($('.accordion__low').hasClass('open')) {
|
74
98
|
|
75
|
-
|
99
|
+
$('.accordion__low').removeClass('open');
|
76
100
|
|
77
|
-
|
101
|
+
$('.accordion__low').slideDown();
|
78
102
|
|
79
|
-
|
103
|
+
//fontawesome下向き矢印にする
|
80
104
|
|
81
|
-
|
105
|
+
$('.gnav-accordion--item').children('i').removeClass()
|
82
106
|
|
83
|
-
|
107
|
+
.addClass('fas fa-chevron-down');
|
84
108
|
|
85
|
-
|
109
|
+
}
|
86
110
|
|
87
|
-
|
88
111
|
|
89
|
-
//メニューバーが開いているなら
|
90
112
|
|
91
|
-
|
113
|
+
//メニューバーが開いているなら
|
92
114
|
|
93
|
-
|
115
|
+
else {
|
94
116
|
|
95
|
-
|
117
|
+
$('.accordion__low').addClass('open');
|
96
118
|
|
97
|
-
|
119
|
+
$('.accordion__low').slideUp();
|
98
120
|
|
99
|
-
|
121
|
+
//fontawesome右向き矢印にする
|
100
122
|
|
101
|
-
|
123
|
+
$('.gnav-accordion--item').children('i').removeClass()
|
102
124
|
|
103
|
-
|
125
|
+
.addClass('fas fa-chevron-right');
|
104
126
|
|
105
|
-
|
127
|
+
}
|
106
128
|
|
107
|
-
});
|
129
|
+
});
|
130
|
+
|
131
|
+
});
|
108
132
|
|
109
133
|
```
|
110
134
|
|
@@ -121,3 +145,9 @@
|
|
121
145
|
クリックしたメニューだけにアコーディオンを動作させる方法を教えてください。
|
122
146
|
|
123
147
|
よろしくお願いします。
|
148
|
+
|
149
|
+
|
150
|
+
|
151
|
+
|
152
|
+
|
153
|
+
```
|