suchen

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中世界最好的语言
php中世界最好的语言Original
2018-03-26 09:15:292765Durchsuche

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>

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!

Stellungnahme：
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
Vorheriger Artikel：JS implementiert die Animations-Timer-MethodeNächster Artikel：JS implementiert die Animations-Timer-Methode

In Verbindung stehende Artikel

Mehr sehen