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

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

質問 1 サンプルテキスト

ロレム・イプサム・シット・アメット、コンセクテトゥアー・アディピシング・エリート、アンティ・アット・フェウギア・ティンシダント、コモド・ラキニア・マッサ・ディアム・ベル・エロス。 /h3>Lorem ipsum dolor sit amet, consectetuer adipiscing eligula.

ここに別の質問があります

マッサ・グラビダ・メトゥス、コモド・ラキニア・マッサ・ディアム・ベル・エロス、ヌンク・フリンギラ・ネケ・ヴィタエ・オディオ、ロレム・イプサム・ドール・シット・モルビ・マレスアダ、アンテ・アット・フェウジア・ティンシダント、コモド・ラキニア・マッサ。ディアム・ベル・エロス。

サンプルの質問見出し

ロレム・イプサム・シット・アディピシング・エリート。ネケ・ヴィタエ・オディオ。
完全なデモ コード:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>jquery </title>

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。