回答編集履歴
1
コードが変だったので改修
answer
CHANGED
|
@@ -103,20 +103,35 @@
|
|
|
103
103
|
また、特定の要素を覚えておく事で、そこから子孫要素を探す`find`メソッドを使う事で簡単にコンポーネント化が実現出来るだろう。
|
|
104
104
|
|
|
105
105
|
```js
|
|
106
|
+
// ボタンを連打された時に変な挙動になる気がしたので、
|
|
107
|
+
// 先受けになるがフラグを用意しておいた
|
|
106
108
|
$('.accordion_menu').each(function(){
|
|
107
|
-
$elm = $(this);
|
|
109
|
+
var $elm = $(this);
|
|
110
|
+
var isOpened = false;
|
|
108
111
|
$elm.find('.appear').hide();
|
|
109
|
-
$elm.('.button').click(function(){
|
|
112
|
+
$elm.find('.button').click(function(){
|
|
113
|
+
isOpened = !isOpened;
|
|
114
|
+
if (isOpened) {
|
|
110
|
-
|
|
115
|
+
$elm.find('.appear').slideDown();
|
|
116
|
+
$(this).addClass('open');
|
|
117
|
+
} else {
|
|
118
|
+
$elm.find('.appear').slideUp();
|
|
111
|
-
|
|
119
|
+
$(this).removeClass('open');
|
|
120
|
+
}
|
|
112
121
|
return false;
|
|
113
122
|
});
|
|
114
123
|
});
|
|
115
124
|
```
|
|
116
125
|
|
|
126
|
+
動作は未検証だが、これでアコーディオンメニューというコンポーネントの作成は完了。
|
|
127
|
+
後はHTML上で`.accordion_menu`クラスを付与してやり、
|
|
128
|
+
`.button`クラスをポチポチすれば`.appear`クラスの表示・非表示が切り替わるようになる。
|
|
129
|
+
アコーディオンが増えてもHTMLの改修のみで完了するようになる。
|
|
130
|
+
|
|
117
131
|
jQuery(JS)とHTMLとCSSは決してひとつでは成り立たない。
|
|
118
132
|
不味いHTMLの設計をJSとCSSのみで吸収するとコードが歪になり、
|
|
119
|
-
|
|
133
|
+
継ぎ接ぎの布を充てがうようなコードを納品することになってしまう。
|
|
120
134
|
|
|
121
135
|
良いHTMLならばeachやfor文でスパッと一撃で解決出来るコードになる。
|
|
122
|
-
これを目指して相互に少しずつ改良していくようにしよう。
|
|
136
|
+
これを目指して相互に少しずつ改良していくようにしよう。
|
|
137
|
+
どちらの設計力も身につけば、一撃で素晴らしいHTMLやJSコードを作って納品出来るようになる。
|