How to implement multi-level drop-down menu function in JavaScript?

How to implement multi-level drop-down menu function in JavaScript?

In web development, drop-down menus are a common and important element, often used to implement functions such as navigation menus and classification filters. Multi-level drop-down menus are based on ordinary drop-down menus and can contain more levels and richer content. This article will introduce how to use JavaScript to implement multi-level drop-down menu functions, and attach specific code examples.

First, we need to define a container element in HTML to wrap each level of the drop-down menu. You can use <div> or <ul> elements as containers. An example is as follows:

<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>

Next, we can use JavaScript to bind events to the drop-down menu element so that it can expand or collapse the submenu. You can use event delegation to listen to click events on container elements. When a menu item containing a submenu is clicked, the corresponding submenu is displayed or hidden. The sample code is as follows:

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

This code uses event delegation to bind the click event to the document object, and determines whether the click is by judging the class name of the click target. A menu item that contains submenus. Then use the classList API to add or remove the show class name according to the display status of the submenu, thereby switching the display or hiding of the submenu.

Next, we need to add styles to the submenu so that it can be positioned and displayed correctly. You can use CSS to define styles, use absolute positioning and display: none to control the hiding and display of submenus.

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

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

In the above code, we define display: none; for the .dropdown-menu element so that it is hidden by default. Added the .show class name in JavaScript to display the submenu when a menu item containing a submenu is clicked.

To summarize, the key steps to implement the multi-level drop-down menu function are as follows:

1. Define the structure of the multi-level drop-down menu in HTML and add the corresponding style class name.
2. Use JavaScript to bind click events to drop-down menu elements, and listen to click events through event delegation.
3. In the event handling function, determine whether the clicked menu item contains a submenu, and switch the display or hiding of the submenu according to its display status.
4. Define styles in CSS, use absolute positioning and display: none to control the hiding and display of submenus.

By following the above steps, we can implement a simple multi-level drop-down menu function. Based on actual needs, we can further optimize and expand this function, such as adding animation effects, optimizing user experience, etc. Hope this article can help you!

The above is the detailed content of How to implement multi-level drop-down menu function in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!