回答編集履歴
3
JSベタ書きの場合を追加。
test
CHANGED
|
@@ -82,9 +82,7 @@
|
|
|
82
82
|
|
|
83
83
|
|
|
84
84
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
```js
|
|
85
|
+
```javascript
|
|
88
86
|
|
|
89
87
|
var SAMPLE = SAMPLE || {};
|
|
90
88
|
|
|
@@ -187,3 +185,55 @@
|
|
|
187
185
|
new SAMPLE.Accordion();
|
|
188
186
|
|
|
189
187
|
```
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
191
|
+
もし、実装するなら私なら上記の書き方をしますが、
|
|
192
|
+
|
|
193
|
+
投稿者さんの記述スタイルに近い書き方だと、こうなります。
|
|
194
|
+
|
|
195
|
+
```javascript
|
|
196
|
+
|
|
197
|
+
$('.accordion_trigger').on('click', function() {
|
|
198
|
+
|
|
199
|
+
var $trigger = $(this),
|
|
200
|
+
|
|
201
|
+
$targetArea = $trigger.next();
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
205
|
+
$trigger.toggleClass('active');
|
|
206
|
+
|
|
207
|
+
$targetArea.slideToggle();
|
|
208
|
+
|
|
209
|
+
});
|
|
210
|
+
|
|
211
|
+
|
|
212
|
+
|
|
213
|
+
$('#drop_menu div ul li a').on('click', function() {
|
|
214
|
+
|
|
215
|
+
var $openTrigger = $(this),
|
|
216
|
+
|
|
217
|
+
targetId = $openTrigger.attr('href'),
|
|
218
|
+
|
|
219
|
+
$targetTrigger = $(targetId),
|
|
220
|
+
|
|
221
|
+
$targetArea = $targetTrigger.next();
|
|
222
|
+
|
|
223
|
+
|
|
224
|
+
|
|
225
|
+
$("#drop_menu div ul").slideUp('slow');
|
|
226
|
+
|
|
227
|
+
|
|
228
|
+
|
|
229
|
+
$targetTrigger.addClass('active');
|
|
230
|
+
|
|
231
|
+
$targetArea.slideDown();
|
|
232
|
+
|
|
233
|
+
});
|
|
234
|
+
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
|
|
238
|
+
|
|
239
|
+
|
2
HTML、JSコード修正
test
CHANGED
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
|
|
27
27
|
|
|
28
28
|
|
|
29
|
-
なお
|
|
29
|
+
なお、ハンバーガーメニューをクリックした時、スライドダウンさせる要素をターゲットとして取得しなければなりません。
|
|
30
30
|
|
|
31
31
|
そちらについては、aタグのhref属性設定されている「#anchor1」の文字列を利用して、
|
|
32
32
|
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
|
|
45
45
|
<div>
|
|
46
46
|
|
|
47
|
-
<ul>
|
|
47
|
+
<ul class="drop_menu_list">
|
|
48
48
|
|
|
49
49
|
<li><a href="#anchor1" class="open_trigger">トグル要素1</a></li>
|
|
50
50
|
|
|
@@ -106,6 +106,8 @@
|
|
|
106
106
|
|
|
107
107
|
this.$openTrigger = $('.open_trigger');
|
|
108
108
|
|
|
109
|
+
this.$dropMenuList = $('.drop_menu_list');
|
|
110
|
+
|
|
109
111
|
|
|
110
112
|
|
|
111
113
|
this.bindEvent();
|
|
@@ -132,6 +134,8 @@
|
|
|
132
134
|
|
|
133
135
|
e.preventDefault();
|
|
134
136
|
|
|
137
|
+
_self.slideUp();
|
|
138
|
+
|
|
135
139
|
_self.slideDown(this);
|
|
136
140
|
|
|
137
141
|
});
|
|
@@ -149,6 +153,12 @@
|
|
|
149
153
|
$trigger.toggleClass('active');
|
|
150
154
|
|
|
151
155
|
$targetArea.slideToggle();
|
|
156
|
+
|
|
157
|
+
},
|
|
158
|
+
|
|
159
|
+
slideUp: function(){
|
|
160
|
+
|
|
161
|
+
this.$dropMenuList.slideUp();
|
|
152
162
|
|
|
153
163
|
},
|
|
154
164
|
|
1
ターゲット取得についての補足
test
CHANGED
|
@@ -23,6 +23,16 @@
|
|
|
23
23
|
|
|
24
24
|
|
|
25
25
|
上記のような関係にします。スライドダウンであれば、そもそも開いている要素に対して行っても、閉じてしまうことはありません。
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
なおｍハンバーガーメニューをクリックした時、スライドダウンさせる要素をターゲットとして取得しなければなりません。
|
|
30
|
+
|
|
31
|
+
そちらについては、aタグのhref属性設定されている「#anchor1」の文字列を利用して、
|
|
32
|
+
|
|
33
|
+
`$('#anchor1')`という形で取得できるように書き、ターゲットとなるトリガーをまず取得しています。
|
|
34
|
+
|
|
35
|
+
そのトリガーの隣の要素が、ターゲットとなるトグル要素として取得できます。
|
|
26
36
|
|
|
27
37
|
|
|
28
38
|
|