Detaillierte grafische Erklärung, wie man natives JS verwendet, um einen Akkordeon-Navigationseffekt zu erzielen

Ist Ihnen beim Durchsuchen der Website aufgefallen, dass es viele Navigationsstile gibt, z. B. Breadcrumb-Navigation, Dropdown-Menünavigation, Akkordeon-Navigation usw. Als Front-End-Entwickler wissen Sie, wie man die Akkordeon-Navigation implementiert Verwenden von nativem JS Effektiv? In diesem Artikel erfahren Sie mehr über die Idee, einen Akkordeoneffekt mit nativem JS zu erstellen, und über den JS-Akkordeoneffektcode. Er hat einen gewissen Referenzwert und interessierte Freunde können einen Blick darauf werfen.

Die Verwendung von JS zum Erstellen einer Akkordeon-Navigation erfordert viele JavaScript-Kenntnisse, z. B. Umschalten, for-Schleife, if-Funktion usw. Wenn Sie sich nicht sicher sind, können Sie auf die entsprechenden Artikel auf der chinesischen PHP-Website oder klicken Besuchen Sie das JavaScript-Video-Tutorial , ich hoffe, es kann Ihnen helfen!

Die Idee, den Akkordeon-Navigationseffekt zu implementieren: Wenn die Maus auf die erste Schaltfläche klickt, wird der Inhalt der ersten Schaltfläche angezeigt. Wenn auf die zweite Schaltfläche geklickt wird, wird der Inhalt der zweiten Schaltfläche angezeigt angezeigt. Und so weiter. Verwenden Sie in JavaScript eine for-Schleife, um zu durchlaufen, wie viele Schaltflächen vorhanden sind, und verwenden Sie die if-Funktion, um die maximale Höhe zum Anzeigen und Ausblenden des Schaltflächeninhalts zu bestimmen. Der spezifische Code lautet wie folgt:

HTML-Teil: Legen Sie drei fest Schaltflächen und der entsprechende Inhalt

<h2>手风琴动画效果</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>

CSS-Teil: Verwenden Sie CSS, um die Seite zu verschönern und einfache Effekte zu erzielen, wie zum Beispiel, dass die Farbe dunkler wird, wenn die Maus über die Schaltfläche fährt

.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;
   }

JavaScript-Teil: Dies ist der Schlüsselteil des Akkordeoneffekts, der bestimmt: Kann der Inhalt der Schaltfläche ausgeblendet und angezeigt werden? Oben werden Text, Bilder und Code verwendet, um Ihnen die Verwendung von nativem JS vorzustellen. Um den Akkordeon-Navigationseffekt zu erzielen, müssen Freunde, die noch nie zuvor damit in Berührung gekommen sind, es selbst ausprobieren und sehen, ob Sie einen solchen Effekt durch Handschrift erzielen können. Ich hoffe, dieser Artikel hilft Ihnen!

Weitere verwandte Tutorials finden Sie im

Das obige ist der detaillierte Inhalt vonDetaillierte grafische Erklärung, wie man natives JS verwendet, um einen Akkordeon-Navigationseffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!