纯JS实现二级菜单点击效果与样式实例

在本文档中，我们探讨的是如何利用纯JavaScript来实现一个简单的二级菜单效果。首先，让我们理解这个菜单的基本结构。HTML部分包含三个一级菜单项，每个一级菜单项（如"首页"、"人才"和"市场"）都关联着一个隐藏的二级菜单容器，这些容器在id分别为"erji2"、"erji3"和"erji4"的div元素中。 CSS部分定义了菜单的基本样式，包括一级菜单的样式（`.yiji`）和二级菜单的样式（`.erji1`）。一级菜单设置为红色背景，白色文字，居中对齐，并带有边框，宽度和高度都是40px。二级菜单则设置为淡黄色背景，同样有白色文字，点击时通过JavaScript控制显示或隐藏。 JavaScript部分是实现动态效果的关键。每个一级菜单项都有一个`onclick`事件，当用户点击时，会触发`Show()`函数。这个函数接收一个参数，即对应二级菜单的id，然后通过JavaScript控制相应id的二级菜单元素的`display`属性，如果为`none`，则将其设置为`block`，显示二级菜单；反之，则隐藏。 例如，当用户点击"首页"对应的`<div class="yiji" onclick="Show('erji2')">`时，会调用`Show('erji2')`，将`id="erji2"`的`<div>`从`display:none`变为`display:block`，使其可见。同理，对于"人才"和"市场"菜单项也执行类似的操作。 这种纯JavaScript实现的二级菜单效果，无需依赖额外的库或框架，适合基础的网页交互设计。它展示了JavaScript如何控制页面元素的可见性以及如何与HTML和CSS紧密结合，以实现动态的用户体验。开发者可以进一步扩展此基础，例如添加动画效果、响应式设计或者通过事件委托优化性能。