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

  

    

      产品
      

        
手机
        
平板
        
笔记本
      
    
    

      服务
      

        
技术支持
        
在线客服
      
    
  

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

document.querySelectorAll('.menu-title').forEach(title => {
  title.addEventListener('click', function(e) {
    // 获取对应的子菜单
    const subMenu = this.nextElementSibling;
// 切换显示状态
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;
}
// JS 修改部分
title.addEventListener('click', function() {
const subMenu = this.nextElementSibling;
subMenu.classList.toggle('active');
});