jQueryとは？
jQueryとは「JavaScriptのライブラリ」で、処理を簡単にしたり、Javascriptでは困難だったブラウザの互換性に対応するなど、jQueryが使われるようになったことで、Web制作がよりやりやすく効率化されました。
jQueryの基礎知識について知りたい方は、下記のリンクをクリックしてください！
jQueryとは？導入方法・サンプルコード・基礎構文までを解説！
jQueryを使用するには？
公式サイトからダウンロード
上記のサイトにある
Download the compressed, production jQuery 3.6.0
をクリックしてダウンロードしてください。
※バージョンの更新により、3.6.0ではない可能性があります。
jQueryのslideToggleメソッドについて
slideToggleメソッドとは、jQuery専用のメソッドで、下記のサンプルのようなにゅるっとした開閉ボタンを作るのに適しています。
このメソッドは以前まではなかったのですが、これの登場によりアコーディオンメニューの実装がとても楽になりました。
要は、slideToggle()と指定するだけでにゅるっとした動作になります。
また、slideToggle(200)と指定すると、0.2秒の速さで開閉するという速度指定も可能です。
さらに、第2引数に関数を設定することで、slideToggleが実行された後に関数を実行することも可能です。
例：slideToggle(200, test_function);
slideToggleでアコーディオンを実装したサンプル
slideToggleを使用してアコーディオンメニューを作成
それでは、先ほど登場したサンプルを作ってみたいと思います。
コードを全てコピペすれば実装できますので、お急ぎの方はサンプルコードをコピペしてください。
ちなみに、最初に紹介した通りjQuery本体を読み込まないと使用できませんのでご注意ください。
HTMLのサンプルコード
<dt>アコーディオンメニュー1</dt>
<dd>アコーディオンメニュー中身</dd>
<dt>アコーディオンメニュー2</dt>
<dd>アコーディオンメニュー中身</dd>
<dt>アコーディオンメニュー3</dt>
<dd>アコーディオンメニュー中身</dd>
</dl>
CSSのサンプルコード
display: block;
width: 200px;
padding: 1.5rem;
box-sizing: border-box;
line-height: 2;
text-align: center;
background: #666;
color: #fff;
cursor: pointer;
border: #fff solid 1px;
}
#ac_menu dd {
background: #eee;
width: 200px;
padding: 1.5rem;
box-sizing: border-box;
line-height: 2;
text-align: center;
display: none;
margin: 0;
}
jQueryのサンプルコード
$(function(){
$("#ac_menu dt").on("click", function() {
$(this).next().slideToggle();
});
});
</script>
アコーディオンメニューの解説
今回のアコーディオンメニューの作り方は、dtをクリックしたらddが出てくるという仕組みにするので、まずcssでddをdisplay: none;にします。
あとは、下記のようにjQueryを記述します。
下記のコードは、#ac_menuのdtをクリックしたとき、関数を実行する
実行内容は、クリックした要素の次の要素をにゅるっと表示させる。
といった感じに翻訳できます。
$(function(){
$("#ac_menu dt").on("click", function() {
$(this).next().slideToggle();
});
});
</script>
slideToggleを使用してアコーディオンメニューの目次を作成する方法
これも実務でよく出てくる、開閉式の目次ですね。
この目次も、slideToggleを使えばをさくっと作ることができます。
今回は、thisや.nextを使わず要素の指定をセレクタのみで行ってみます。
目次サンプル
HTMLのサンプルコード
<button class="open_btn">目次を開く</button>
<ul>
<li><a href="">目次1</a></li>
<li><a href="">目次2</a></li>
<li><a href="">目次3</a></li>
<li><a href="">目次4</a></li>
<li><a href="">目次5</a></li>
</ul>
</div>
CSSのサンプルコード
margin: 1.5rem;
width: 80%;
padding: 1rem;
box-shadow: 0px 0px 2px 4px #dfdfdf;
}
.nav_area ul li {
list-style: none;
padding: 1rem;
}
.nav_area ul {
display: none;
}
jQueryのサンプルコード
$(".open_btn").on("click", function(){
$(".nav_area ul").slideToggle();
});
</script>
目次アコーディオンメニューの解説
今回の目次アコーディオンとアコーディオンメニューの違いは、要素の指定の仕方です。
これは、slideToggleに限った話ではないのですが、thisはともかく.nextが使用できない場合に積まないよう、セレクタでの指定方法も覚えて頂きたいなと思います。
下記のコードを翻訳すると.open_btnをクリックしたら関数を実行、実行内容は、.nav_area ulをslideToggle（にゅるっと表示）させる。
という内容です。
どちらの指定方法も覚えてslideToggleをマスターしてください。
$(".open_btn").on("click", function(){
$(".nav_area ul").slideToggle();
});
</script>
our note サービス一覧
our noteはブログに加えて、下記のサービスを行っております。
バナー制作やコーディングなどの、Web制作に関するご依頼を頂いております。
また、私が制作したLINEスタンプの販売も行っております。
詳細は、下記をご覧ください。
ココナラ
「ココナラ」というサービスを活用して、バナー制作やコーディングの案件を受注しております。
品質を担保するため、最大2案件までとさせていただいております。
案件のご相談やご依頼がございましたら、ココナラからご依頼をお願いいたします。
ココナラ