使用HTML+CSS+JS实现二级菜单的兼容性代码示例

本文将介绍如何使用HTML、CSS和JavaScript通过嵌套的`<ul>`和`<li>`元素创建一个兼容多种浏览器（包括IE6-9、谷歌和火狐）的简单二级菜单。示例代码包含了一个基本的菜单结构，并展示了如何通过JavaScript控制二级菜单的显示与隐藏。 在网页设计中，二级菜单是一种常见的导航结构，它允许用户在主菜单项下进一步探索子菜单中的内容。在本示例中，我们看到`<ul>`元素被用来定义一级菜单，而一级菜单的每个`<li>`元素内部又包含了一个嵌套的`<ul>`来表示二级菜单。 HTML部分： 首先，我们创建一个包含多个`<li>`元素的`<ul>`，每个`<li>`元素都包含一个链接（`<a>`）和一个可展开/折叠的二级菜单（`<ul>`）。二级菜单的`<ul>`初始时是隐藏的，通过CSS的`display:none`属性实现。例如： ```html <ul> <li><a href="#" onclick="Show('rule')">相关法规</a> <ul id="rule"> <li><a href="#">AdobeReader</a></li> ... </ul> </li> ... </ul> ``` CSS部分： CSS用于美化菜单并处理二级菜单的显示和隐藏。我们可以设置`<li>`的样式，以及二级菜单的默认隐藏状态。例如： ```css #menu ul { list-style-type: none; margin: 0; padding: 0; } #menu li { position: relative; } #menu ul ul { display: none; position: absolute; top: 100%; } ``` JavaScript部分： JavaScript代码主要用于控制二级菜单的显示和隐藏。在本例中，`onclick`事件被附加到一级菜单的链接上，调用名为`Show`的函数。这个函数接收一个参数，用于确定要显示哪个二级菜单。例如： ```javascript function Show(id) { var ul = document.getElementById(id); if (ul.style.display == 'block') { ul.style.display = 'none'; } else { ul.style.display = 'block'; } } ``` 这个示例中的JavaScript代码相当简洁，当用户点击链接时，对应的二级菜单会根据其当前的显示状态切换显示。如果二级菜单当前是展开的（即`display: block`），则将其隐藏；反之，则将其显示。 总结： 通过结合HTML的结构化标签、CSS的样式控制和JavaScript的交互功能，我们可以创建出兼容多种浏览器的二级菜单。这种方法不仅适用于简单的导航，还可以扩展到更复杂的多级菜单。同时，为了提高用户体验，我们还需要考虑触摸设备的适配以及响应式布局，确保菜单在不同屏幕尺寸和设备上都能正常工作。