JavaScriptでマルチレベルのドロップダウンメニュー機能を実装するにはどうすればよいですか?-jsチュートリアル-php.cn

JavaScriptでマルチレベルのドロップダウンメニュー機能を実装するにはどうすればよいですか?

王林

リリース： 2023-10-21 12:43:53

オリジナル

1121 人が閲覧しました

JavaScript 如何实现多级下拉菜单功能？

複数レベルのドロップダウンメニュー機能を JavaScript で実装するにはどうすればよいですか?

Web 開発では、ドロップダウンメニューは一般的かつ重要な要素であり、ナビゲーションメニューや分類フィルターなどの機能を実装するためによく使用されます。マルチレベルのドロップダウンメニューは通常のドロップダウンメニューに基づいており、より多くのレベルとより豊富なコンテンツを含めることができます。この記事では、JavaScript を使用してマルチレベルのドロップダウンメニュー機能を実装する方法を紹介し、具体的なコード例を添付します。

まず、HTML でコンテナ要素を定義して、ドロップダウンメニューの各レベルをラップする必要があります。 <div> または <ul> 要素をコンテナとして使用できます。例は次のとおりです。

<div class="dropdown-container">
  <!-- 第一级菜单 -->
  <div class="dropdown-menu">
    <a href="#">菜单项1</a>
    <a href="#">菜单项2</a>
    <a href="#">菜单项3</a>
    <!-- 第二级菜单 -->
    <div class="dropdown-submenu">
      <a href="#">菜单项4</a>
      <a href="#">菜单项5</a>
      <a href="#">菜单项6</a>
      <!-- 第三级菜单 -->
      <div class="dropdown-submenu">
        <a href="#">菜单项7</a>
        <a href="#">菜单项8</a>
        <a href="#">菜单项9</a>
      </div>
    </div>
  </div>
</div>

ログイン後にコピー

次に、JavaScript を使用してイベントをドロップダウンメニュー要素にバインドし、サブメニューを展開または折りたたむことができるようにします。イベント委任を使用して、コンテナ要素のクリックイベントをリッスンすることができます。サブメニューを含むメニュー項目をクリックすると、対応するサブメニューが表示または非表示になります。サンプルコードは次のとおりです。

document.addEventListener('click', function(event) {
  var target = event.target;
  
  // 判断点击的是否为包含子菜单的菜单项
  if (target.classList.contains('dropdown-submenu')) {
    // 切换显示子菜单的状态，如果已显示则隐藏，否则显示
    target.querySelector('.dropdown-menu').classList.toggle('show');
  }
});

ログイン後にコピー

このコードは、イベント委任を使用してクリックイベントを document オブジェクトにバインドし、クリックターゲットのクラス名を判断してクリックかどうかを判断します。 . サブメニューを含むメニュー項目。その後、classList API を使用して、サブメニューの表示状況に応じて show クラス名を追加または削除し、サブメニューの表示/非表示を切り替えます。

次に、サブメニューを正しく配置して表示できるように、サブメニューにスタイルを追加する必要があります。 CSS を使用してスタイルを定義したり、絶対位置を使用したり、display: none を使用してサブメニューの非表示と表示を制御したりできます。

.dropdown-menu {
  position: relative;
  display: none;
}

.dropdown-menu.show {
  display: block;
  /* 添加其他样式，如宽度、背景色等 */
}

ログイン後にコピー

上記のコードでは、.dropdown-menu 要素に display: none; を定義して、デフォルトで非表示になるようにしています。サブメニューを含むメニュー項目をクリックしたときにサブメニューを表示するために、JavaScript に .show クラス名を追加しました。

要約すると、マルチレベルドロップダウンメニュー機能を実装するための主要な手順は次のとおりです。

マルチレベルドロップダウンメニューの構造を HTML で定義する対応するスタイルクラス名を追加します。
JavaScript を使用してクリックイベントをドロップダウンメニュー要素にバインドし、イベント委任を通じてクリックイベントをリッスンします。
イベントハンドリング関数では、クリックされたメニュー項目にサブメニューが含まれるかどうかを判定し、その表示状態に応じてサブメニューの表示・非表示を切り替えます。
CSS でスタイルを定義し、絶対配置と display: none を使用してサブメニューの非表示と表示を制御します。

上記の手順に従うことで、単純な複数レベルのドロップダウンメニュー機能を実装できます。実際のニーズに基づいて、アニメーション効果の追加やユーザーエクスペリエンスの最適化など、この機能をさらに最適化および拡張できます。この記事があなたのお役に立てば幸いです!

以上がJavaScriptでマルチレベルのドロップダウンメニュー機能を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。