JS动态菜单制作与效果演示

<div class="menu-container">
  <ul class="main-menu">
    <li>
      <span class="menu-title">产品</span>
      <ul class="sub-menu">
        <li><a href="#">手机</a></li>
        <li><a href="#">平板</a></li>
        <li><a href="#">笔记本</a></li>
      </ul>
    </li>
    <li>
      <span class="menu-title">服务</span>
      <ul class="sub-menu">
        <li><a href="#">技术支持</a></li>
        <li><a href="#">在线客服</a></li>
      </ul>
    </li>
  </ul>
</div>

.menu-container {
  width: 200px;
  font-family: Arial, sans-serif;
}
<p>.main-menu > li {
position: relative;
}</p><p>.menu-title {
display: block;
padding: 10px;
background-color: #333;
color: white;
cursor: pointer;
text-align: left;
}</p><p>.menu-title:hover {
background-color: #555;
}</p><p>.sub-menu {
display: none; /<em> 默认隐藏 </em>/
list-style: none;
margin: 0;
padding: 0;
background-color: #f4f4f4;
border-left: 3px solid #007acc;
}</p><p>.sub-menu li a {
display: block;
padding: 8px 12px;
text-decoration: none;
color: #333;
font-size: 14px;
}</p><p>.sub-menu li a:hover {
background-color: #ddd;
}</p>

document.querySelectorAll('.menu-title').forEach(title => {
  title.addEventListener('click', function(e) {
    // 获取对应的子菜单
    const subMenu = this.nextElementSibling;
<pre class="brush:php;toolbar:false;">// 切换显示状态
if (subMenu.style.display === 'block') {
  subMenu.style.display = 'none';
} else {
  subMenu.style.display = 'block';
}

// 可选：关闭其他已打开的菜单
document.querySelectorAll('.sub-menu').forEach(menu => {
  if (menu !== subMenu) {
    menu.style.display = 'none';
  }
});

}); });

// CSS
.sub-menu.active {
  display: block;
}
<p>// JS 修改部分
title.addEventListener('click', function() {
const subMenu = this.nextElementSibling;
subMenu.classList.toggle('active');
});</p>