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;

});

comportement et style sont étroitement liés.

Pseudo-classe : target

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>

ul id="ac1">

      li>二级菜单1/li>

      li>二级菜单2/li>

      li>二级菜单3/li>

 /ul>

ul{ display:none;}

ul:target{display:block;}

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>

ul{ display:none;}

ul:target{display:block;}

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>

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

div:target ul{height:400px;}

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

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>

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>

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

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!