Ausführliche Erläuterung der Untersuchung der drei Effekte von Akkordeon in HTML5-Anwendungen

Abstrakt: Der Akkordeoneffekt (auch bekannt als „Schubladeneffekt“) ist nach seinem Erweiterungsstil benannt, der wie ein Akkordeon aussieht. Durch hierarchische Beziehungen wird eine geschickte Balance zwischen Informationsdarstellung und Seitenlayout erreicht. Daher wird es häufig im Web- und App-Interaktionsdesign verwendet. In früheren Projekten wurde Accordion normalerweise durch JavaScript-Codierung implementiert. Dieser Austausch konzentriert sich auf die Erforschung zweier Methoden, die nicht auf JS angewiesen sind und reines CSS3 oder HTML5 verwenden, um ihre Wirkung zu erzielen. Und vergleichen Sie vorab die Vor- und Nachteile.

Traditionelle JS-Implementierungsmethoden

1. Natives JavaScript

2. Aufrufen von JS-Bibliotheksdateien, jQuery, jQuery Mobile

$'.menu_lev1').clickfunction) {

    var _this=$this),

        _next=_this.next);

    if _next.is':visible')) {

        $'.menu_lev1').removeClass'on');

        $'.menu_lev2').slideUp600);

        _this.addClass'on');

        _next.slideDown600);

    } else {

        _next.slideUp600);

        _this.removeClass'on');

    }

    return true;

});

Nachteile des Kopierens von Code: geringe Effizienz, hohe Kosten, Verhalten und Stil sind eng miteinander verbunden.

CSS3 Pseudoklasse: target

target ist eine der neuen Pseudoklassen in CSS3. Über den Ankerpunkt können dem Zielelement bestimmte Stile hinzugefügt werden. Aufgrund der Einzigartigkeit der Ankerpunkte auf der Seite können sich gegenseitig ausschließende Rotationseffekte erzielt werden.

Beispielcode 1: h1 Verzeichnis der ersten Ebene/h1>

ul id="ac1">

      li>二级菜单1/li>

      li>二级菜单2/li>

      li>二级菜单3/li>

 /ul>

Code kopieren

ul{ display:none;}

ul:target{display:block;}

Code kopierenBeispielcode 2: c1">Erste Ebene Verzeichnis /a>/h1>

ul id="ac1">

      li>二级菜单1/li> 

      li>二级菜单2/li> 

      li>二级菜单3/li>

/ul>

h1>2">一级目录/a>/h1>

ul id="ac2">

      li>二级菜单1/li> 

      li>二级菜单2/li> 

      li>二级菜单3/li>

/ul>

h1>一级目录/a>/h1>

ul id="ac3">

      li>二级菜单1/li> 

      li>二级菜单2/li> 

      li>二级菜单3/li>

/ul>

Code kopieren

ul{ display:none;}

ul:target{display:block;}

Code kopieren Beispielcode 3: div id="ac1" >

h1>a >一级目录/a>span>/span>/h1>

ul>

      li>二级菜单1/li>

      li>二级菜单2/li>

/ul>

/div>

div id="ac2" >

          h1>a >一级目录/a>span>/span>/h1>

          ul>

               li>二级菜单1/li>

               li>二级菜单2/li>

          /ul>

/div>

div id="ac3" >

          h1>a 3">一级目录/a>span>/span>/h1>

          ul>

               li>二级菜单1/li>

               li>二级菜单2/li>

          /ul>

/div>

Code kopieren

ul{-webkit-transition:all ease 1s; } 

div:target ul{height:400px;}

div:target span{-webkit-transform:rotate90deg);}

Code kopieren CSS3-Pseudoklasse: targetl Nachteile: 1. Nicht dualistisch. 2. Übergangsanimation

Höhe kann nicht automatisch abgerufen werden Zusammenfassung und Details sind zwei neue Tags in HTML5, die nicht nur über eine starke

-Semantik verfügen, sondern auch über überraschende dynamische Effekte verfügen. Daher können wir mit dieser Funktion ganz einfach einen leichten Akkordeoneffekt erzielen , diese beiden Tags sollten paarweise verwendet werden. Beispielcode 1: Details> . Dieses Tag wird derzeit nur vom Webkit-Kernel unterstützt: Details

Codeanweisungen kopieren: Es kann verschachtelt werden, um drei oder mehr Ebenen von Menüs zu bilden >

Nachteile beim Kopieren: 1. Nicht gegenseitig ausschließend. 2. Unterstützt noch keine Übergangsanimationseffekte. JS erzielt derzeit die reichhaltigsten Effekte Mit geringen Kosten und hoher Effizienz kann HTML5 einen Akkordeoneffekt erzielen, der jedoch keinen Animationseffekt aufweist und sich nicht gegenseitig ausschließt zu CSS3 und Die Einführung und Entwicklung von HTML5 fördert das Konzept des Webdesigns weiter, das Struktur, Stil und Verhalten trennt, wodurch die Abhängigkeit von JS in der Leistung verringert, die Kosten für die Webseitenproduktion gesenkt und die Effizienz des Webseitenbetriebs verbessert werden Es ist nicht zu erwarten, dass CSS3 und HTML5 mit der Zeit weiter verbessert werden und leistungsfähigere Funktionen bereitstellen die viele Inhalte enthalten, verwenden Sie HTML5-Tags, um den Akkordeon-Effekt zu erzielen. Zumindest der Autor von Html5doctor bevorzugt dies in WordPress.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Untersuchung der drei Effekte von Akkordeon in HTML5-Anwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!