jQueryで簡単なアコーディオン効果を実装するにはどうすればよいですか? (コード例)

jQuery を使用して簡単なアコーディオン効果を実現するにはどうすればよいですか?この記事では、jQuery を使用して簡単なアコーディオン効果を実現する方法を紹介します (コード付き)。必要な方は参考にしていただければ幸いです。 [推奨チュートリアル: JavaScript ビデオ チュートリアル ]

基本的な考え方:

アコーディオンの効果は主に HTML ドキュメントの構造に依存します。使用する構造が異なると、到着した jq メソッドも異なる場合があります。

<div>
　　
　　<div>标题　　

　　　　<div>内容</div>
 　 </div>
　　<div>标题　　

　　　　<div>内容</div>
 　 </div>
　　<div>标题　　

　　　　<div>内容</div>
 　 </div>
　　
　　<div>标题　　

　　　　<div>内容</div>
 　 </div>
</div>

私の基本的なアイデアは、タイトル バーをクリックしてその子要素に下向きの表示アニメーションを持たせ、次に子を通して親自体を見つけ、親の子の兄弟と一致させて非表示にすることです。 。

効果は次のとおりです: (スタイルは醜いですが、見てください)

---

コードを添付します。 (jquery ファイルを html に導入することを忘れないでください)

html 部分:

<div>
	<div>box1

		<div>1111</div>
		<div>1111</div>
		<div>1111</div>
		<div>1111</div>

	</div>

	<div>box2
		<div>5555</div>
		<div>5555</div>
		<div>5555</div>
		<div>5555</div>
	</div>

	<div>box3
		<div>33333</div>
		<div>33333</div>
		<div>33333</div>
		<div>33333</div>
	</div>
	<div>box4
		<div>2222</div>
		<div>2222</div>
		<div>2222</div>
		<div>2222</div>
	</div>
</div>

css 部分:

div {
	border: 1px solid #000;
	width: 200px;
}

.navv {
	background-color: ghostwhite;
}

.navv div {
	background-color: aquamarine;
	border-left: none;
	border-right: none;
	display: none;
}

#box {
	margin: 0 auto;
}

#box1_c,#box2_c,#box3_c,#box4_c {
	border: none;
}

js 部分:

$().ready(function(){
    $(".navv").click(function(){
      $(this).children().slideDown(200).parent().siblings().children().slideUp(200);
    })
 })

動的レンダリング:

#

以上がjQueryで簡単なアコーディオン効果を実装するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。