JavaScript实现父子级菜单展开与收起

该资源提供了一段JavaScript代码和CSS样式，用于实现网页中的子父级菜单的上下展开和收起功能。用户通过点击父级菜单项来展开或收起对应的子菜单，使得导航更加交互友好。 JavaScript部分主要包含以下几个函数和逻辑： 1. `menuFix()` 函数：这个函数的主要作用是为页面中ID为`nav`的`<ul>`列表的所有`<li>`元素添加事件监听器。当鼠标悬停、按下、释放以及移出这些元素时，`sfhover`类将被添加或移除，从而改变元素的样式，实现鼠标悬停时的高亮效果。 2. `DoMenu(emid)` 函数：这个函数负责切换指定ID的菜单项的状态，根据当前类名（"expanded" 或 "collapsed"）切换展开与收起。同时，如果存在上一次打开的子菜单，会将其关闭。`LastLeftID`变量用于跟踪最后被展开的子菜单ID。 3. `GetMenuID()` 函数：此函数从URL中解析出菜单ID（如果存在），然后调用`DoMenu()`函数来自动展开相应的菜单。这通常用于页面加载时根据URL参数设置初始展开的菜单。 4. `GetMenuID()` 和 `menuFix()` 的执行顺序：在Firefox中，它们的执行顺序是关键，确保`GetMenuID()`在`menuFix()`之后执行，以正确地处理页面加载时的菜单状态。 CSS部分主要定义了菜单的样式： - `body` 和 `#nav` 设置了基本的字体、字号、边距和列表样式。 - `#nav.yiji` 和 `#nav.yijia` 是针对一级菜单和二级菜单的样式，包括背景色、边框、浮动和行高。`:hover`, `:visited`, `:link` 伪类用于控制不同状态下的颜色和装饰。 - `#nav.yijiul` 和 `#nav.yijiulli` 是二级菜单的子列表样式，包括内边距、背景色和图片定位，用于在展开子菜单时显示适当的背景和缩进。 这段代码和样式可以用于创建一个响应式且具有良好交互体验的子父级菜单，适用于网页导航。用户可以通过点击父级菜单项，实现子菜单的展开和收起，使得网站内容的浏览更加方便。