jquery回転表示最初の小さいexample_jquery-jsチュートリアル-php.cn

jquery回転表示最初の小さいexample_jquery

WBOY

リリース： 2016-05-16 18:26:56

オリジナル

1100 人が閲覧しました

効果は以下の図のようになります。
jquery回転表示最初の小さいexample_jquery
サンプルを読んで自分で書きましたが（自分への励ましだと思ってください！）
jquery

 
$(document).ready (function(){ 
var h3=$(".accordion h3"); 
$(".accordion h3:eq(0)").addClass("active");//1. 最初の取得最初の H3 タグとクラスを追加します。 
$(".accordion p:gt(0)").hide();//最初の p タグを除くすべてのタグを非表示にします。
h3.click(function() { 
$(this).next("p").slideToggle("slow")//アニメーションを追加する次の p タグを見つけ、その兄弟ノードが表示されているかどうかを確認します。表示されている場合は非表示にします。 
.siblings("p :visible").fadeOut("slow"); 
$(this).toggleClass("active");// H3 タグにクラスを追加します (存在する場合、存在する場合は追加します)、兄弟ノードを見つけて削除します。 class 
$(this).siblings("h3").removeClass("active"); 
}); 

 

css

コードをコピーコードは次のとおりです:

ボディ { 
マージン: 10px 自動; 
幅: 570px; 
フォント: 75%/120% Arial、Helvetica、サンセリフ; 
。アコーディオン { 
幅: 480px; 
ボーダーボトム: ソリッド 1px #c4c4c4; 
} 
.accordion h3 { 
背景: #e9e7e7 url(images/arrow-square.gif) -repeat right -51px; 
パディング: 7px 15px; 
フォント: 120%/100% Arial、Helvetica、サンセリフ; 
border-bottom: none; 
cursor: pointer; 
} 
.accordion h3:hover { 
background-color: #e3e2e2; 
.accordion h3.アクティブ { 
背景位置: 右 5px; 
.accordion p { 
背景: #f7f7f7; 
パディング: 10px 15px 
ボーダー左: ソリッド 1px #c4c4c4; 
ボーダー右: ソリッド 1px #c4c4c4; 

 

html
 


 