Heim > Artikel > Web-Frontend > Ausführliche Erläuterung der Verwendung von faltbaren Paneelen in JS
Ausführliche Erläuterung der Verwendung von faltbaren Paneelen in JS
- php中世界最好的语言Original
- 2018-03-26 09:15:292722Durchsuche
Dieses Mal werde ich Ihnen die Verwendung von JS-Faltplatten ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung von JS-Faltplatten? Das Folgende ist ein praktischer Fall, schauen wir uns das an.
Zum Beispiel
<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>Analyse
Der Schlüssel liegt darin, die nächste Methode zu verstehen
und die slideToggle-Methode
die sich darauf bezieht bis Das aktuelle Element h3
next wählt die benachbarten Elemente derselben Ebene aus, was nicht bedeutet, dass die Beschriftungen gleich sind. In diesem Beispiel haben p und h3 beispielsweise dieselbe Ebene
Das Obige ist eine Kettenoperation
wobei
$(this).next().slideToggle();
auch als
$(this)
.next()
.slideToggle();geschrieben werden kann. Ich glaube, Sie haben die Methode nach dem Lesen des Falles gemeistert Weitere spannende Inhalte finden Sie auf der chinesischen PHP-Website anderen verwandten Artikeln!
Empfohlene Lektüre:
So sortieren Sie nach der Schlüsselwertgröße des Arrays
Laravel implementiert eine Multi- Benutzerauthentifizierungssystem
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung von faltbaren Paneelen in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!