開閉式のメニュー

1. 『見出しをクリックすると内容が開閉する』
（１）まず、HTMLで「内容」が開いた状態を作成する。
（２）CSSで「内容」が閉じた状態を作成する。
（３）jQueryで内容が開閉するようにする。

2. <section class="submenu">
<h3>見出しをクリックすると内容が開閉する</h3>
<ul class="hidden">
<li>クリックした見出しだけクリック毎に内容が開閉する</li>
</ul>
</section>
.hidden{
display: none;
}
（１）まず、HTMLで「内容」が開いた状態を作成する。
（２）CSSで「内容」が閉じた状態を作成する。
「内容」
「見出し」

3. toggleClass(class)
指定したcssクラスが
要素になければ追加し、
あれば削除する。
toggleClass('hidden')

4. （３）jQueryで内容が開閉するようにする。
class=“submenu” の<h3> をクリックされた時に
を適用したり外したりする
非表示 表示する
<ul class=“hidden”>のクラスhiddenをつけたり外したりする
.hidden{
display: none;
}
⇨ 表示・非表示するようにする

5. （３）jQueryで内容が開閉するようにする。
$(‘.submenu h3').click(function(){
//ここに処理を書く
});

6. （３）jQueryで内容が開閉するようにする。
$(’.submenu h3').click(function(){
$(this).next().toggleClass('hidden');
});

7. 別のやり方

8. slideToggle()
slideDown、slideUpの動作を交互に行います

9. $(’.submenu h3').click(function(){
$(this).next().slideToggle();
});
slideToggle(‘slow’)
slideToggle(‘fast’)
slideToggle(1500)
ゆっくり
速く
1.5秒かけて動く
slideToggle() 初期値 ‘normal’