ネイティブ JS を使用してアコーディオン ナビゲーション効果を実現する方法の詳細な図による説明

Web サイトを閲覧すると、ブレッドクラム ナビゲーション、ドロップダウン メニュー ナビゲーション、アコーディオン ナビゲーションなど、さまざまなスタイルのナビゲーションがあることに気づきましたか。フロントエンド開発者として、ネイティブ ナビゲーションの使用方法を知っていますか?アコーディオンナビゲーションを実装するJSは効果的ですか?この記事では、ネイティブ JS でアコーディオン エフェクトを作成するアイデアと JS アコーディオン エフェクトのコードについて説明します。一定の参考になるので、興味のある方はご覧ください。

JS を使用してアコーディオン ナビゲーションを作成するには、toggle、for ループ、if 関数など、多くの JavaScript の知識が必要です。不明な場合は、PHP 中国語 Web サイトの関連記事を参照するか、 JavaScript ビデオ チュートリアル にアクセスしてください。お役に立てれば幸いです。

アコーディオン ナビゲーション効果の実装のアイデア: マウスが最初のボタンをクリックすると、最初のボタンのコンテンツが表示され、2 番目のボタンをクリックすると、2 番目のボタンのコンテンツが表示されます。などが表示されます。 JavaScript では、for ループを使用してボタンの数を調べ、if 関数を使用してボタンのコンテンツを表示または非表示にする maxHeight を決定します。具体的なコードは次のとおりです。

HTML 部分: 3 つを設定します。ボタンと対応するコンテンツ

<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 パーツ: CSS を使用してページを美しくし、マウスがボタンの上を通過すると色が濃くなるなどの単純な効果を実現します。

.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 パーツ: これはアコーディオン効果の重要な部分であり、ボタンのコンテンツを非表示にしたり表示したりできるかどうかを決定します。

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

効果は次のとおりです:

上記では、ネイティブ JS の使用方法をテキスト、画像、コードを使用して紹介しています。アコーディオン ナビゲーション効果を実現するには、これまでアコーディオン ナビゲーション効果を体験したことのない友人が自分で試して、手書きでそのような効果が得られるかどうかを確認する必要があります。この記事がお役に立てば幸いです!

その他の関連チュートリアルについては、JavaScript 中国語リファレンス マニュアル

をご覧ください。

以上がネイティブ JS を使用してアコーディオン ナビゲーション効果を実現する方法の詳細な図による説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。