jQueryでメニューを作る
よくある質問やコンテンツが長い部分でよく使用されるクリックすると展開するメニューを簡単に実装できるソースを公開。
コピペで簡単に実装することができるのでぜひ試してみてください。
ではいってみよう！
サンプルHTML
クリックすると展開する起点となる部分に「btn」とclassを付けます。
好きな名前に変更可能です。
<ul> <li> <div class="btn">ボタン</div> <div class="content"> <p>テストテストテストテストテストテストテストテストテストテストテストテスト</p> </div> </li> </ul>
サンプルCSS
最初にコンテンツが見えないように非表示の設定をしておきます。
ul li .content{
display: none;
}
jQueryの記述
「btn」をクリックすることで展開します。
【非表示になっている場合】
slideUpで非表示。
【非表示になっている場合】
slideDownで表示。
$(function () {
$(".btn").on("click", function () {
$(this).next().slideToggle();
});
});
こんな感じで簡単に実装できます！
ぜひ実装してみてください！
ABOUT ME
