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

1. Kenal pasti elemen pengepala: Gunakan kelas .header untuk menentukan yang mana baris jadual berfungsi sebagai pengepala.
2. Togol keterlihatan: Selepas mengklik pengepala, gunakan kaedah nextUntil untuk memilih semua baris yang mengikuti pengepala itu sehingga pengepala seterusnya ditemui. Kaedah slideToggle kemudian mengembangkan atau meruntuhkan baris yang dipilih.

Coretan Kod

<code class="javascript">$('.header').click(function(){
    $(this).nextUntil('tr.header').slideToggle(1000);
});</code>

Pendekatan Alternatif Menggunakan CSS dan Elemen Pseudo

1. Peraturan CSS: Tentukan elemen pseudo dengan sifat :selepas untuk mewakili tanda pengembangan/runtuhkan ( atau -).
2. Togol Kelas CSS: Tetapkan 'expand ' kelas ke pengepala yang diklik dan togol paparannya berdasarkan keadaan unsur 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!