jQueryでの開閉式のアコーディオンの動きいろいろ | CSS Lecture

jQueryでの開閉式のアコーディオンの動きいろいろ

Category
： Javascript

jQueryでの開閉式のアコーディオンの動き

クリックをすると開閉するようなメニューやコンテンツってよく見かけたりしますし、実際に使いたいってクライアントもけっこう多いですしね。

開閉時の動きについても実際いろいろとあるわけなんですが、今回はjQueryで出来る一番基礎的な事を紹介しておきたいと思います。

デモページの解説

動きの違いはJavascriptの最後の方に記述されている「$(this).next()」の次に指定する要素を変更しているだけです。

「.slideToggle("slow");」の()内には「slowやfast」以外にも数字で指定も出来ますよ。

使い方はjQueryとデモページで記述されているスクリプトをheadタグ内にでも読み込ませて下さい。

2009 01-14 20:32 PM

「関連するエントリー」が多くなりすぎたときに縮める方法

images/item/2009-03/030202.gif" border...

by cubic extria 2009年03月02日 02:57

この記事で紹介しておりますアコーディオンは基本的なものであり、二階層にわかってアコーディオンをする仕組みになっておりません…

自分の方でいくつかスプリクトを書き換えてみたのですが、IEで上手く動作しなかった為、こちらは後日調べて、新規の記事にて紹介したいと思います。

2009年04月07日 01:37

moma

はじめまして。質問があり投稿しました。

筆者さまが書かれたJSでアコーディオンを作成しましたが、第2階層にリンクするとアコーディオンが閉じてしまいます。これはどこを修正すれば、開いたままになるでしょうか？

お忙しいところ恐れ入りますが、ご教授いただけますでしょうか。よろしくお願いいたします。

2009年04月06日 16:58

2010年

2009年

2008年