Maison > Article > interface Web > Développez et fermez en cliquant avec javascript

Développez et fermez en cliquant avec javascript

WBOYoriginal: 2023-05-29 22:40:081694parcourir

Alors que les besoins de la conception Web moderne continuent de croître, la demande d'effets dynamiques devient de plus en plus forte. L'une des demandes courantes consiste à cliquer sur un bouton ou un lien pour développer ou fermer le contenu. Pour le moment, nous pouvons utiliser JavaScript pour implémenter cette fonction.

JavaScript est un langage de programmation dynamique qui peut manipuler le HTML et le CSS sur les pages Web, ainsi que gérer l'interaction des utilisateurs et les effets dynamiques. Dans la démo suivante, nous utiliserons JavaScript pour créer un bouton qui développe et ferme le contenu.

Tout d’abord, nous devons créer une page HTML. Dans cette page, nous ajouterons un élément DIV qui contient le contenu et un bouton qui développe et ferme le contenu. Le code est le suivant :

<!DOCTYPE html>
<html>
   <head>
      <title>JavaScript点击展开和关闭</title>
      <style>
         .content {
            display: none; /* 隐藏内容 */
         }
      </style>
   </head>
   <body>
      <button onclick="toggle()">点击展开/关闭</button>
      <div class="content">
         <p>我是一个可以展开和关闭的内容。</p>
      </div>
      <script src="script.js"></script>
   </body>
</html>

Dans le code ci-dessus, nous avons créé un bouton et un élément DIV, l'élément DIV contient le contenu que nous souhaitons développer ou fermer. Nous définissons également l'affichage de l'élément DIV sur "aucun" afin que l'élément ne soit pas affiché initialement.

Ensuite, nous devons ajouter du code JavaScript pour implémenter les fonctions d'expansion et de fermeture. Nous plaçons ces codes dans le fichier script.js.

let content = document.querySelector('.content');

function toggle() {
   if (content.style.display === 'none') {
      content.style.display = 'block';
   } else {
      content.style.display = 'none';
   }
}

Dans le code ci-dessus, nous utilisons d'abord "document.querySelector" pour obtenir l'élément DIV contenant le contenu et le stockons dans la variable "content". Ensuite nous définissons une fonction appelée "toggle" qui sera appelée lorsque le bouton sera cliqué.

La fonction "toggle" utilise une instruction "if" pour vérifier si l'attribut "display" du contenu DIV est "aucun". Si tel est le cas, la fonction "toggle" définira sa propriété "display" sur "block" afin qu'elle affiche le contenu. Sinon, la fonction "toggle" définira sa propriété "display" sur "none", masquant ainsi son contenu.

Nous avons désormais terminé la possibilité de développer et de fermer le contenu. Lorsque vous cliquez sur le bouton, le contenu DIV sera affiché ou masqué, en fonction de son état d'affichage actuel. Nous pouvons ajuster le style et le code en fonction de nos propres besoins pour nous adapter à nos propres besoins de conception.

JavaScript est un langage très puissant qui peut ajouter de nombreuses fonctionnalités dynamiques et interactives à la conception Web. J'espère que cet article vous a été utile et vous a inspiré à essayer davantage de techniques de programmation JavaScript.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Pourquoi les botvs utilisent-ils javascript ?Article suivant：Pourquoi les botvs utilisent-ils javascript ?

Articles Liés

Voir plus