freefuntimes今回は、jQueryを使ったアコーディオンメニューを実装する。仕様については、下記の記事と同じようになっている。該当の記事はこちらページを読み込み時に閉じた状態のメニューをクリックすると展開され、展開されたメニューをクリックすると閉じる仕様になっている。demoそれでは解説に入っていく。src="style.js"></script></body></html>ソースは冒頭で紹介した記事の時と変わっていない。}}jQueryのslideToggle(jQuery部分で解説)でアコーディオンメニューの開閉の動きを実装するため、cssではopacityで透明にしたり、heightを0にしたり、visiblityをhiddenにしたりといった調整が不要になる。そのため、こういった記述は削除している。これによりアコーディオンメニューの中身がjQuery側でdisplayのnoneとblockで表示を制御できるようになる。});});以前のjavascriptの記述と比べると、たったこれだけの記述で済む。やっていることとしては、ページを読み込んでからbl_accordionTitleをクリックした時、bl_accordionTitleに対してactiveというクラスがつき、さらに、その次の兄弟要素bl_accordionContentがslideToggleによって展開されるようになっている。thisはbl_accordionTitleのことを指している。省略できるコードはこのように簡略化して記述することで見やすいコードになる。大規模なページを作成するときに役に立つので、普段から見やすいコードを書けるように心がけておくようにしている。toggleClassは、クラスがついていなければ追加してくれ、クラスがついていれば削除してくれるものと認識いただければよい。slideToggleは、要素が展開されていなければ、slideDownにより要素が展開され、要素が展開されていれば、slideUpで要素の展開が閉じるものだと認識いただければよい。意外と実装は難しくないので、手軽に使うならよさそうだ。[...]コメントはクローズされています。(2)人気ブログランキングこのサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。