下拉菜单无法正常工作

Question

我正在使用媒体查询来提高网站的响应能力。当我单击该图标时，菜单会下降，但是当我再次单击返回时...它不会返回。

我的html代码

<nav>
  <img src="../images/shotbyopi.logo (5).png" alt="logoPic" />
  <ul id="sidemenu">
    <li><a href="#">Home</a></li>
    <hr />
    <li><a href="#about-1">About</a></li>
    <hr />
    <li><a href="#wrapper">Services</a></li>
    <hr />
    <li><a href="#contact">Contact</a></li>
  </ul>
  <i class="fa-solid fa-circle-chevron-down" onclick="toggleMenu()"></i>
</nav>

这是我正在处理的特定屏幕的 CSS

@media (min-width: 481px) and (max-width: 768px) {
  nav .fa-circle-chevron-down {
    display: block;
    font-size: 85px;
    position: fixed;
    top: 20px;
    right: 20px;
    color: transparent;
    -webkit-text-stroke: 4px #fff;
    z-index: -2;
    transition: transform 0.5s ease-in-out;
    margin-top: 60px;
    cursor: pointer;
  }

  nav img {
    width: 325px;
    height: 325px;
  }

  nav .fa-solid:hover {
    transform: translateY(-10px);
    transform: rotate(90deg);
  }

  nav ul {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    margin-left: 0;
    background: transparent;
    position: fixed;
    text-align: center;
    margin-top: 20px;
    top: -100vh;
    left: 0;
    width: 27%;
    height: 100vh;
    padding: 50px 20px;
    z-index: 2;
    transform: translateX(230%);
    transition: top 0.5s ease-in-out;
  }

  /* When the menu is active */
  nav ul.show-menu {
    top: 0; /* Slide down into view */
  }

  /* Styling for individual list items */
  nav ul li {
    margin: 5px 0;
    font-size: 1.5rem;
  }

  /* Make sure links are styled clearly */
  nav ul li a {
    color: white;
    text-decoration: none;
  }
}

提供的 CSS 代码似乎是使用菜单图标和项目列表来设计导航元素 (nav) 的样式。

我的菜单栏功能的 JavaScript 代码

function toggleMenu() {
    const menu = document.getElementById('sidemenu');
    const toggleIcon = document.querySelector('.toggle-menu');
  
    menu.classList.toggle('show-menu');
    toggleIcon.classList.toggle('rotate');
  }
  
  document.addEventListener('DOMContentLoaded', () => {
    const toggleIcon = document.querySelector('.toggle-menu');
  
    if (toggleIcon) {
      toggleIcon.addEventListener('click', toggleMenu);
    } else {
      console.error('Element with class "toggle-menu" not found.');
    }
  });

我尝试从 Gemini AI 获取更正，但它开始显示错误，下面是 javascript 代码

function toggleMenu() {
  const menu = document.getElementById('sidemenu');
  const toggleIcon = document.querySelector('.toggle-menu');

  menu.classList.toggle('show-menu');
  toggleIcon.classList.toggle('rotate');
}

document.addEventListener('DOMContentLoaded', () => {
  const toggleIcon = document.querySelector('.toggle-menu');

  if (toggleIcon) {
    toggleIcon.addEventListener('click', toggleMenu);
  } else {
    console.error('Element with class "toggle-menu" not found.');
  }
});

Answer 1

由于 z-index 设置，菜单会覆盖图标，并使菜单打开时图标不可点击。通过增加菜单图标的 z-index (z-index: 3)、将切换菜单类添加到图标并确保在 CSS 中定义旋转类，您可以解决此问题。这样，图标仍然可单击，并且菜单可以按预期打开和关闭。

nav .fa-circle-chevron-down {
    ...
    z-index: 3;
    ...
}

<nav>
    <img src="../images/shotbyopi.logo (5).png" alt="logoPic">
    <ul id="sidemenu">
        ...
    </ul>
    <i class="fa-solid fa-circle-chevron-down toggle-menu"></i>        
</nav>

document.addEventListener('DOMContentLoaded', () => {
  const toggleIcon = document.querySelector('.toggle-menu');

  if (toggleIcon) {
    toggleIcon.addEventListener('click', toggleMenu);
  } else {
    console.error('Element with class "toggle-menu" not found.');
  }
});

function toggleMenu() {
  const menu = document.getElementById('sidemenu');
  const toggleIcon = document.querySelector('.toggle-menu');

  menu.classList.toggle('show-menu');
  toggleIcon.classList.toggle('rotate');
}

.toggle-menu {
    transition: transform 0.5s ease-in-out;
}

.toggle-menu.rotate {
    transform: rotate(180deg); /* Adjust the degree as needed */
}