Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie schalte ich die Sichtbarkeit von Tabellenzeilen mit Header-Klicks mithilfe von jQuery und CSS um?

DDD
Freigeben: 2024-11-03 13:24:30
Original
336 Leute haben es durchsucht

How to Toggle Table Row Visibility with Header Clicks using jQuery and CSS?

Tabellenzeilen beim Klicken auf die Kopfzeile erweitern und reduzieren

Dieser Artikel befasst sich mit der Herausforderung, bestimmte Tabellenzeilen zu erweitern und zu reduzieren, wenn die entsprechenden Kopfzeilenspalten vorhanden sind angeklickt.

Die bereitgestellte HTML-Tabelle besteht aus Zeilen mit abwechselnden Kopfabschnitten. Um das gewünschte Verhalten zu erreichen, nutzen wir die Leistungsfähigkeit von jQuery.

jQuery-Ansatz

  1. Header-Elemente identifizieren: Verwenden Sie die .header-Klasse, um zu bestimmen, welche Tabellenzeilen dienen als Überschriften.
  2. Sichtbarkeit umschalten: Wenn Sie auf eine Überschrift klicken, verwenden Sie die nextUntil-Methode, um alle Zeilen auszuwählen, die dieser Überschrift folgen, bis die nächste Überschrift gefunden wird. Die slideToggle-Methode erweitert oder reduziert dann die ausgewählten Zeilen.

Code-Snippet

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

Alternativer Ansatz unter Verwendung von CSS und einem Pseudo-Element

  1. CSS-Regel: Definieren Sie ein Pseudoelement mit der Eigenschaft :after, um das Erweiterungs-/Komprimierungszeichen ( oder -) darzustellen.
  2. CSS-Klasse umschalten: Weisen Sie ein „expand“ zu '-Klasse zum angeklickten Header hinzufügen und seine Anzeige basierend auf dem Status des Pseudoelements umschalten.

Code-Snippet

<code class="css">.header .sign:after{
  content:"+";
  display:inline-block;      
}
.header.expand .sign:after{
  content:"-";
}</code>
Nach dem Login kopieren
<code class="javascript">$(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);</code>
Nach dem Login kopieren

Dies Der alternative Ansatz vermeidet die Notwendigkeit, mehrere CSS-Klassen zu verfolgen, was die Implementierung vereinfacht.

Das obige ist der detaillierte Inhalt vonWie schalte ich die Sichtbarkeit von Tabellenzeilen mit Header-Klicks mithilfe von jQuery und CSS um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage