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

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>

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>

<code class="javascript">$(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);</code>

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!