ホームページ > 記事 > ウェブフロントエンド > JSでの折り畳みパネルの使い方を詳しく解説
JSでの折り畳みパネルの使い方を詳しく解説
- php中世界最好的语言オリジナル
- 2018-03-26 09:15:292721ブラウズ
今回は、JS 折りたたみパネルの使用について詳しく説明します。JS 折りたたみパネルを使用する際の 注意事項 は何ですか?実際の事例を見てみましょう。
たとえば<html>
<div id="accord">
<h3>Part1</h3>
<p> I am part 1</p>
<h3>Part2</h3>
<p>I am part 2</p>
<h3>part 3</h3>
<p>I am part 3</p>
</div>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>$("#accord").on('click','h3',function(e){ //绑定单击事件
$(this).next().slideToggle(); //深入理解next选择器})
</script>
</html>分析重要なのはnextメソッドとslideToggleメソッドを理解することですこれは現在の要素h3を指しますnextはラベルではなく、同じレベルのすぐ隣の要素を選択しますこの例のように、 p は h3 と同じレベルです 上記はチェーン操作です、ここで $(this).next().slideToggle();は
$(this)
.next()
.slideToggle(); と書くこともできます。事例を読んだ後、メソッドをマスターしたと思います。この記事では、さらに興味深い内容については、PHP 中国語 Web サイトその他の関連記事に注目してください。
推奨読書:以上がJSでの折り畳みパネルの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。