Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Togol Keterlihatan Baris Jadual dengan Klik Pengepala menggunakan jQuery dan CSS?
Kembangkan dan Runtuhkan Baris Jadual pada Klik Pengepala
Artikel ini menangani cabaran mengembangkan dan meruntuhkan baris jadual tertentu apabila lajur pengepala yang sepadan adalah diklik.
Jadual HTML yang disediakan terdiri daripada baris dengan bahagian pengepala berselang-seli. Untuk mencapai gelagat yang diingini, kami akan memanfaatkan kuasa jQuery.
Pendekatan jQuery
Coretan Kod
<code class="javascript">$('.header').click(function(){ $(this).nextUntil('tr.header').slideToggle(1000); });</code>
Pendekatan Alternatif Menggunakan CSS dan Elemen Pseudo
Codean Kod
<code class="css">.header .sign:after{ content:"+"; display:inline-block; } .header.expand .sign:after{ content:"-"; }</code>
<code class="javascript">$(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);</code>
Ini pendekatan alternatif mengelakkan keperluan untuk menjejak berbilang kelas CSS, memudahkan pelaksanaan.
Atas ialah kandungan terperinci Bagaimana untuk Togol Keterlihatan Baris Jadual dengan Klik Pengepala menggunakan jQuery dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!