ここ最近は動的に動くホームページが一気に増えました。
このような背景には今回ご紹介するJQueryの使用者が増えたからだと思われます。
今回はそんなホームページでよく見かけるサイドメニューが収縮できるアコーディオンの基礎をJQueryを使用してご紹介したいと思います。
【サンプル】
Menu
アコーディオン(パターン1)
動作
単純にクリックしたら表示、クリックしたら非表示になります。
JQueryライブラリ読込
headタグ内にコピペしてJQueryライブラリを読み込みます。
1 | <script src="https://code.jquery.com/jquery-1.8.3.js"></script> |
動作の詳細
①$(“.aaa dd”).hide() → 最初はddを閉じておきます。
②dtタグをクリックするとnextUntilでddまで処理を行う指定を行います。
③slideToggleで閉まってたら開く(開いてたら閉まる)の処理を行います。
引数のfastは200ミリ秒、slowは600ミリ秒で開いたり閉じたりします(数値でも指定は可能で初期値は400ミリ秒)
結果は下記のResultのような動きになります。
See the Pen
rNedmLG by tomoy777 (@tomboy777)
on CodePen.
あとはCSSで自分の好きな形に形成してあげればオリジナリティが出てきます。
アコーディオン(パターン2)
動作
表示させたい箇所をクリックしたら開き、その他は自動で閉じます。
JQueryライブラリ読込
headタグ内に下記をコピペしてJQueryライブラリを読み込みます。
1 | <script src="https://code.jquery.com/jquery-1.8.3.js"></script> |
動作の詳細
①$(“.child”).hide() → 最初はchildクラスを閉じておきます。
②parentクラスをクリックするとtoggleClassでaddがparentクラスになければaddを追加の処理を行い、nextUntilでddまで処理を行う指定を行い、slideToggleでparentクラスが開いてれば閉じて、閉じていれば開くの処理を行います。
③クリック以外のparentクラスをremoveClassでadd削除の処理を行い、nextUntilでddまで処理を行う指定を行い、slideupで閉じる処理を行います。
結果は下記のResultのような動きになります。
See the Pen LYNdayY by tomoy777 (@tomboy777) on CodePen.
あとはCSSで自分の好きな形に形成してあげればオリジナリティが出てきます。
まとめ
今回ご紹介した2パターンがサイトでよく見かける動きです。
どちらを使用するかはケースバイケースということで、この際に是非2パターンまとめて覚えちゃいましょう(*^^)v
以上です。
こんな難しい処理や嫌!っていう方は下記が超絶簡単です(*゚▽゚)ノ
超簡単CSSなしで実践的なアコーディオンがコピペですぐ使えます。
【JQuery CSS不要】アコーディオンのclickとhover