HTML5代码实现折叠菜单

HTML结构

在HTML5中，折叠菜单通常使用

和
• 标签来构建，以下是一个简单的示例：

                           
           
               
                   标题1                                  
                       
  子项11
                       
  子项12
                                        
               
               
                   标题2                                  
                       
  子项21
                       
  子项22
                                        
               
                        
       
    

  CSS样式

  通过CSS来定义菜单的样式，这包括菜单的宽度、颜色、背景等，特别地，li:hover > ul的样式用于定义当鼠标悬停在主菜单项上时，子菜单如何展开。

   /* styles.css */ .nav {     liststyle: none;     padding: 0; } .nav li {     position: relative; } .nav li .sub {     display: none;     position: absolute;     top: 100%;     left: 0;     backgroundcolor: #f9f9f9;     minwidth: 200px;     boxshadow: 0 8px 16px rgba(0,0,0,0.2);     zindex: 1; } .nav li:hover > .sub {     display: block; }

  JavaScript代码

  使用JavaScript来实现菜单的动态交互，当点击父菜单项时，其子菜单会展开或折叠。

  

   // script.js document.querySelectorAll('.nav > li').forEach(function(item) {     item.addEventListener('click', function(e) {         var subMenu = this.querySelector('.sub');         if (subMenu.style.display === 'block') {             subMenu.style.display = 'none';         } else {             subMenu.style.display = 'block';         }         e.stopPropagation(); // 阻止事件冒泡，避免点击子菜单时触发父菜单的折叠     }); });

  源码下载

  你可以将上述HTML、CSS和JavaScript代码保存为相应的文件，并在本地服务器上运行查看效果，如果你需要一个完整的项目结构，可以创建一个包含以下文件的目录：

  index.html 包含HTML结构。

  styles.css 包含CSS样式。

  

  script.js 包含JavaScript代码。

  将这些文件放在同一个目录下，并用浏览器打开index.html即可看到折叠菜单的效果。