コピペで開閉メニュー 【jQuery】

スライド式のメニュー交互の切り替え

（スマホでよくつかわれる隠れてる帯のメニューなど（上下））
ボタンとなるエリアに、【slideToggle】をかけてあげる。

$(function(){
$("ボタンセレクタ").click(function(){
$("div").slideToggle("slow");
});
});

複数の同じ動きをするときは、下のコピペ用にあるように.next()にしてあげる。
もしくはクラスで指定してあげると楽。

◆開閉メニュー《ノーマル》

★html側

<h1>メニュー</h1>
<ul>
<li>メニューその1</li>
<li>メニューその2</li>
<li>メニューその3</li>
<li>メニューその4</li>
<li>メニューその5</li>
<li>メニューその6</li>
</ul>

★js側

$(function(){
$('li:nth-child(odd)').css("background","#ffb9b9");←①
$("ul").hide();←②

$("h1").click(
function(){$(this).next().slideToggle("slow");});

});

①…偶数のリスト（li）の背景に色ついてる
②…最初に消しとく

◆開閉メニュー《アニメーション》

★html側

※上と同じ

★js側

  $("h1").click(function(){
$(this).next().animate({height :"toggle",opacity:"toggle"},"slow");
});

※DIVのボックスの開閉メニューも同じです。



--------------------------------------------
★元からリンクタグではないものに、クリックイベントを使ったときは、
“指マーク”がマウスが上に来た時に出るようにしておく（CSS）

　CSSに追加↓↓↓

h1{
cursor:pointer;
}

--------------------------------------------

cursor…（カーソル）


▼CSSで切り替えてるとき、背景を偶数だけ変える場合

$('セレクタ:even').css('background-color','#カラー');

※偶数の色のみ変更している