Heim > Web-Frontend > js-Tutorial > Ausführliche Erläuterung der Verwendung von faltbaren Paneelen in JS

Ausführliche Erläuterung der Verwendung von faltbaren Paneelen in JS

php中世界最好的语言
Freigeben: 2018-03-26 09:15:29
Original
2780 Leute haben es durchsucht

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(&#39;click&#39;,&#39;h3&#39;,function(e){    //绑定单击事件
    $(this).next().slideToggle();    //深入理解next选择器})
 </script>
</html>
Nach dem Login kopieren

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();
Nach dem Login kopieren

auch als

$(this)
    .next()
    .slideToggle();
Nach dem Login kopieren

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!

Verwandte Etiketten:
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