こんにちは。
misopotaです。
簿記3級の勉強が疲れたので、息抜きにjQueryをいじっていたらちょっとずつですが理解して作れるようになりました。
今回は、HTML・CSS・jQueryを使って、クリックをしたら開閉するボックスを作ってみました。
実物はこちらです。↓
ここをクリックしてみてね
こんにちは。管理人のmisopotaです。
クリックしたら、ボタンの中に隠れていた文章が出てくる…という感じで作りました。 矢印もしっかり動きます。
jQueryのコードに関しては、次の通りになっています。
$('.box2_title').click(function(){
$('.box2_text').slideToggle();
$(this).toggleClass('open');
});
箇条書きで意味を書くと、こんな感じです。
- 「ここをクリックしてみてね（class名：box2_title)」をクリックしたら…
- 隠れているテキスト（class名：box2_text）を開いてね。
- あと、box2_titleをクリックした時にopenクラスもつけといてね。（もう1回クリックされたらopenクラスは消しといてね）
という命令文になっています。
色々調べたりして書いてみたので、意味が合っているかは正直分かりません。
ただ、なんとなく理屈は理解できたかなという感じです。
まあでも、年内の目標だったHTML/CSS、そしてjQueryでカスタマイズができてよかったです。
大晦日に、jQueryの書き方が分かったのも良い収穫でした。
1月からはまた本格的に簿記3級の勉強や障がい者雇用の求人探しや面接などで忙しくなるので、当分はできないかもしれません。
でも、時間があったらちょこちょこ色々と面白いサイトを作りたいなとも思っています。
アコーディオンメニューの作り方や、デベロッパーツール（検証ツール）の使い方も理解できましたしね。
では、年内最後のブログをお読みいただきありがとうございました。
また来年、お会いしましょう。
