网页js侧边栏菜单代码

<div id="sidebar">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#services">Services</a>
      <ul>
        <li><a href="#web-design">Web Design</a></li>
        <li><a href="#seo">SEO</a></li>
      </ul>
    </li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</div>

#sidebar {
  width: 200px;
  background-color: #f4f4f4;
  padding: 20px;
}

#sidebar ul {
  list-style-type: none;
  padding: 0;
}

#sidebar li {
  margin-bottom: 10px;
}

#sidebar a {
  text-decoration: none;
  color: #333;
}

#sidebar ul ul {
  display: none;
  padding-left: 20px;
}

document.addEventListener('DOMContentLoaded', function() {
  const subMenus = document.querySelectorAll('#sidebar ul ul');

  subMenus.forEach(subMenu => {
    const parentLink = subMenu.parentElement.querySelector('a');
    parentLink.addEventListener('click', function(e) {
      e.preventDefault();
      subMenu.style.display = subMenu.style.display === 'block' ? 'none' : 'block';
    });
  });
});