Explication graphique détaillée de la façon d'utiliser JS natif pour obtenir un effet de navigation en accordéon

Lorsque vous parcourez le site Web, avez-vous remarqué qu'il existe de nombreux styles de navigation, tels que la navigation par fil d'Ariane, la navigation par menu déroulant, la navigation en accordéon, etc. En tant que développeur front-end, vous savez comment implémenter la navigation en accordéon utiliser du JS natif Efficace ? Cet article vous parlera de l'idée de créer un effet accordéon avec JS natif et le code de l'effet accordéon JS. Il a une certaine valeur de référence et les amis intéressés peuvent y jeter un œil.

Utiliser JS pour créer une navigation en accordéon nécessite de nombreuses connaissances en JavaScript, telles que la bascule, la boucle for, la fonction if, etc. Si vous n'êtes pas clair, vous pouvez vous référer aux articles pertinents sur le site Web PHP chinois, ou visitez le Tutoriel vidéo JavaScript , j'espère que cela pourra vous aider !

L'idée d'implémenter l'effet de navigation en accordéon : lorsque la souris clique sur le premier bouton, le contenu du premier bouton est affiché. Lorsque vous cliquez sur le deuxième bouton, le contenu du deuxième bouton est affiché. affiché. Et ainsi de suite. En JavaScript, utilisez une boucle for pour parcourir le nombre de boutons et utilisez la fonction if pour déterminer la hauteur max pour afficher et masquer le contenu du bouton. Le code spécifique est le suivant :

Partie HTML : définissez trois. boutons et le Contenu correspondant

<h2 id="手风琴动画效果">手风琴动画效果</h2>  
  <button class="btn">选项 1</button>
  <div class="p1">
    <p>内容1</p>
  </div> 
  <button class="btn">选项 2</button>
  <div class="p1">
    <p>内容2</p>
  </div> 
  <button class="btn">选项 3</button>
  <div class="p1">
    <p>内容3</p>
  </div>

Partie CSS : Utilisez CSS pour embellir la page et obtenir des effets simples, comme par exemple que la couleur devient plus foncée lorsque la souris passe sur le bouton

.btn {
       background-color: #eee;
       color: #444;
       cursor: pointer;
       padding: 18px;
       width: 100%;
       border: none;
       text-align: left;
       outline: none;
       font-size: 15px;
       transition: 0.4s;
   }
   
   .btn.active,.btn:hover {
       background-color: #ddd;
   }  
   .p1 {
       padding: 0 18px;
       background-color: white;
       max-height: 0;
       overflow: hidden;
       transition: max-height 0.2s ease-out;
   }

Partie JavaScript : C'est la partie clé de l'effet accordéon, qui détermine si le contenu du bouton peut être masqué et affiché

var btn = document.getElementsByClassName("btn");
  for (var i = 0; i < btn.length; i++) {
    btn[i].onclick = function() {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight){
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
      } 
    }
  }

L'effet est le suivant :

Ce qui précède vous est remis avec du texte, des images et du code. Il présente comment utiliser JS natif pour obtenir l'effet de navigation en accordéon. Les amis qui n'ont jamais été en contact avec lui auparavant doivent l'essayer eux-mêmes et voir si vous pouvez. écrivez un tel effet à la main. J'espère que cet article vous aidera !

Pour plus de didacticiels connexes, veuillez consulter le Manuel de référence en chinois 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!