为什么在较小的屏幕上，我的嵌套菜单不起作用？-解网

问：

在较小的屏幕上，我希望下拉菜单和嵌套菜单仅在单击时显示。即你点击苹果，红苹果和青苹果出现，如果你点击红苹果，美味出现。等。但是，在苹果的初始点击显示红苹果和青苹果后，我似乎无法让点击工作。我永远无法美味地出现在较小的屏幕上。

https://codepen.io/Dezalops/pen/yLGMbqQ这是密码笔

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      /* Basic Styles */
      .navbar {
        background-color: #333;
      }

      .main-menu {
        list-style-type: none;
        padding: 0;
        display: flex;
        justify-content: space-between;
      }

      .menu-item {
        position: relative;
        margin-right: 20px;
      }

      a {
        text-decoration: none;
        color: white;
        padding: 10px;
        display: block;
      }

      /* Dropdown Styles */
      .submenu {
        display: none;
        position: absolute;
        background-color: #444;
        top: 100%;
        left: 0;
        padding: 0;
        z-index: 1;
      }

      /* Media Query for Larger Screens (Hover) */
      @media screen and (min-width: 769px) {
        .menu-item:hover .submenu {
          display: block;
        }

        .submenu li:hover .nested-menu {
          display: block;
        }
      }

      /* Nested Menu Styles */
      .submenu li {
        padding: 10px;
      }

      .nested-menu {
        display: none;
        position: absolute;
        top: 0;
        left: 100%;
        background-color: #555;
        padding: 0;
        z-index: 2;
      }
    </style>
    <title>Navbar</title>
  </head>
  <body>
    <nav class="navbar">
      <ul class="main-menu">
        <li class="menu-item">
          <a href="#">Apple</a>
          <ul class="submenu">
            <li class="menu-item">
              <a href="#">Red Apple</a>
              <ul class="nested-menu">
                <li><a href="#">Tasty</a></li>
              </ul>
            </li>
            <li class="menu-item">
              <a href="#">Green Apple</a>
              <ul class="nested-menu">
                <li><a href="#">Sweet</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="menu-item">
          <a href="#">Cake</a>
          <ul class="submenu">
            <li class="menu-item">
              <a href="#">Chocolate Cake</a>
              <ul class="nested-menu">
                <li><a href="#">Rich</a></li>
              </ul>
            </li>
            <li class="menu-item">
              <a href="#">Vanilla Cake</a>
              <ul class="nested-menu">
                <li><a href="#">Light</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="menu-item">
          <a href="#">Tea</a>
          <ul class="submenu">
            <li class="menu-item">
              <a href="#">Black Tea</a>
              <ul class="nested-menu">
                <li><a href="#">Strong</a></li>
              </ul>
            </li>
            <li class="menu-item">
              <a href="#">Green Tea</a>
              <ul class="nested-menu">
                <li><a href="#">Healthy</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
    <script>
      // JavaScript for toggling the dropdowns on click for smaller screens
      const menuItems = document.querySelectorAll(".menu-item");

      menuItems.forEach((menuItem) => {
        menuItem.addEventListener("click", (event) => {
          if (window.innerWidth <= 768) {
            // Prevent event bubbling
            event.stopPropagation();

            // Toggle the active class to show/hide the submenu
            menuItem.classList.toggle("active");

            // Toggle the submenu visibility
            const submenu = menuItem.querySelector(".submenu");
            if (submenu) {
              submenu.style.display =
                submenu.style.display === "block" ? "none" : "block";
            }
          }
        });
      });

      // Close submenus when clicking anywhere outside for smaller screens
      document.addEventListener("click", () => {
        if (window.innerWidth <= 768) {
          menuItems.forEach((menuItem) => {
            menuItem.classList.remove("active");
            const submenu = menuItem.querySelector(".submenu");
            if (submenu) {
              submenu.style.display = "none";
            }
          });
        }
      });
    </script>
  </body>
</html>

我尝试了许多 javascript 和 css 样式，但没有任何效果。

JavaScript HTML CSS 下拉菜单嵌套列表

您的事件点击函数将仅针对“submenu”类来更改显示，而您的嵌套菜单只有“nested-menu”类，因此当您单击“巧克力蛋糕”时，返回的子菜单项为 null。如果将子菜单类添加到每个嵌套菜单元素，它将“工作”，但仍会出现一些问题。（它会破坏你的CSS悬停效果，嵌套菜单将保持打开状态）

我认为您最好的解决方案是在子菜单上设置一个不同的点击事件，该事件旨在针对您的嵌套菜单。

上一个：对列内嵌套列表进行排序

下一个：比较特定列表中具有不同索引量和相同条件的嵌套列表

为什么在较小的屏幕上，我的嵌套菜单不起作用？

Why on smaller screens, does my nested-menu not work?

评论