回答編集履歴
1
コードが変だったので改修
test
CHANGED
|
@@ -208,17 +208,35 @@
|
|
|
208
208
|
|
|
209
209
|
```js
|
|
210
210
|
|
|
211
|
+
// ボタンを連打された時に変な挙動になる気がしたので、
|
|
212
|
+
|
|
213
|
+
// 先受けになるがフラグを用意しておいた
|
|
214
|
+
|
|
211
215
|
$('.accordion_menu').each(function(){
|
|
212
216
|
|
|
213
|
-
$elm = $(this);
|
|
217
|
+
var $elm = $(this);
|
|
218
|
+
|
|
219
|
+
var isOpened = false;
|
|
214
220
|
|
|
215
221
|
$elm.find('.appear').hide();
|
|
216
222
|
|
|
217
|
-
$elm.('.button').click(function(){
|
|
223
|
+
$elm.find('.button').click(function(){
|
|
224
|
+
|
|
218
|
-
|
|
225
|
+
isOpened = !isOpened;
|
|
226
|
+
|
|
227
|
+
if (isOpened) {
|
|
228
|
+
|
|
219
|
-
$('.appear').slide
|
|
229
|
+
$elm.find('.appear').slideDown();
|
|
230
|
+
|
|
220
|
-
|
|
231
|
+
$(this).addClass('open');
|
|
232
|
+
|
|
233
|
+
} else {
|
|
234
|
+
|
|
235
|
+
$elm.find('.appear').slideUp();
|
|
236
|
+
|
|
221
|
-
$(this).
|
|
237
|
+
$(this).removeClass('open');
|
|
238
|
+
|
|
239
|
+
}
|
|
222
240
|
|
|
223
241
|
return false;
|
|
224
242
|
|
|
@@ -230,14 +248,26 @@
|
|
|
230
248
|
|
|
231
249
|
|
|
232
250
|
|
|
251
|
+
動作は未検証だが、これでアコーディオンメニューというコンポーネントの作成は完了。
|
|
252
|
+
|
|
253
|
+
後はHTML上で`.accordion_menu`クラスを付与してやり、
|
|
254
|
+
|
|
255
|
+
`.button`クラスをポチポチすれば`.appear`クラスの表示・非表示が切り替わるようになる。
|
|
256
|
+
|
|
257
|
+
アコーディオンが増えてもHTMLの改修のみで完了するようになる。
|
|
258
|
+
|
|
259
|
+
|
|
260
|
+
|
|
233
261
|
jQuery(JS)とHTMLとCSSは決してひとつでは成り立たない。
|
|
234
262
|
|
|
235
263
|
不味いHTMLの設計をJSとCSSのみで吸収するとコードが歪になり、
|
|
236
264
|
|
|
237
|
-
|
|
265
|
+
継ぎ接ぎの布を充てがうようなコードを納品することになってしまう。
|
|
238
266
|
|
|
239
267
|
|
|
240
268
|
|
|
241
269
|
良いHTMLならばeachやfor文でスパッと一撃で解決出来るコードになる。
|
|
242
270
|
|
|
243
271
|
これを目指して相互に少しずつ改良していくようにしよう。
|
|
272
|
+
|
|
273
|
+
どちらの設計力も身につけば、一撃で素晴らしいHTMLやJSコードを作って納品出来るようになる。
|