Explication détaillée de l'exploration des trois effets de l'accordéon dans les applications HTML5

Abstrait : L'effet accordéon (également connu sous le nom de "tiroir") doit son nom à son style d'expansion qui ressemble à un accordéon. Grâce aux relations hiérarchiques, un savant équilibre est atteint dans l'affichage des informations et la mise en page. Par conséquent, il est largement utilisé dans la conception d’interactions Web et d’applications. Dans les projets précédents, Accordion était généralement implémenté par codage JavaScript. Ce partage se concentre sur l'exploration de deux méthodes qui ne s'appuient pas sur JS et utilisent du CSS3 pur ou du HTML5 pour obtenir son effet. Et faites une comparaison préliminaire de ses avantages et inconvénients.

Méthodes d'implémentation JS traditionnelles

1. JavaScript natif

2 Appel des fichiers de la bibliothèque JS, 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;

});

<. 🎜>Inconvénients de la copie de code : faible efficacité, coût élevé,

comportement et style sont étroitement liés.

CSS3

Pseudo-classe : target

target est une des nouvelles

pseudo-classes en CSS3. Il peut ajouter des styles spécifiés à l'élément cible via le point d'ancrage . En raison du caractère unique des points d'ancrage dans la page, des effets de rotation mutuellement exclusifs peuvent être obtenus. Exemple de code 1 : h1 répertoire de premier niveau/h1>

Copier le code

ul id="ac1">

      li>二级菜单1/li>

      li>二级菜单2/li>

      li>二级菜单3/li>

 /ul>

Copier le codeExemple de code 2 : c1">Premier niveau répertoire /a>/h1>

ul{ display:none;}

ul:target{display:block;}

Copier le code

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>

Copier le code Exemple de code 3 : div id="ac1" >

ul{ display:none;}

ul:target{display:block;}

Copier le code

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>

Copier le code CSS3 pseudo-classe : targetl Inconvénients : 1. Pas dualiste 2. La transition

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

div:target ul{height:400px;}

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

l'animation

la hauteur ne peut pas être obtenue automatiquement. résumé et détails sont deux nouvelles balises en HTML5. En plus d'avoir une sémantique forte, elle a également des effets dynamiques surprenants. Par conséquent, avec cette fonctionnalité, nous pouvons facilement créer un effet d'accordéon léger. , ces deux balises doivent être utilisées par paires. Exemple de code 1 : détails>

Copier le style par défaut du code : vous pouvez ajouter l'attribut open

aux détails pour développer les détails par défaut. . Cette balise n'est actuellement prise en charge que par le noyau du webkit. Exemple de code 2 : détails>

Copier la description du code : elle peut être imbriquée pour former trois niveaux de menus ou plus

<🎜. >

 summary>一级目录/summary>  

       ul>

            li>二级菜单/li>

            li>二级菜单/li>

            li>二级菜单/li>

       /ul> 

/details>

Inconvénients du code de copie : 1. Pas mutuellement exclusifs. 2. Pas encore. Prend en charge les effets d'animation de transition

Résumé JS obtient des effets d'accordéon avec un coût élevé et une faible efficacité. avec un faible coût et une efficacité élevée. Bien qu'il puisse obtenir un effet d'animation riche, mais pas de dualité, HTML5 implémente l'effet accordéon, qui est peu coûteux et efficace, mais manque d'effet d'animation et ne s'exclut pas mutuellement. à CSS3 et L'introduction et le développement de HTML5 promeuvent en outre le concept de conception Web qui sépare la structure, le style et le comportement, réduisant ainsi la dépendance à l'égard de JS en termes de performances, réduisant le coût de production des pages Web et améliorant l'efficacité du fonctionnement des pages Web. . Il n'est pas prévu que CSS3 et HTML5 continuent de s'améliorer et de fournir des fonctions plus puissantes avec le temps

Il est recommandé que

soit gracieusement rétrogradé sur la base du principe de priorité aux performances dans les applications Web. qui contiennent beaucoup de contenu. Utilisez des balises HTML5 pour obtenir l'effet Accordéon. Au moins, l'auteur de Html5doctor le préfère dans WordPress.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!