效果：
html页面
| <body> |
| <div class="menu"> |
| <ul> |
| <li> |
| <a href="#">一级菜单</a> |
| <ul> |
| <li><a href="#">二级菜单</a></li> |
| <li><a href="#">二级菜单</a></li> |
| <li><a href="#">二级菜单</a></li> |
| <li><a href="#">二级菜单</a></li> |
| <li><a href="#">二级菜单</a></li> |
| </ul> |
| </li> |
| <li> |
| <a href="#">一级菜单</a> |
| <ul> |
| <li><a href="#">二级菜单</a></li> |
| <li><a href="#">二级菜单</a></li> |
| <li><a href="#">二级菜单</a></li> |
| <li><a href="#">二级菜单</a></li> |
| <li><a href="#">二级菜单</a></li> |
| </ul> |
| </li> |
| <li> |
| <a href="#">一级菜单</a> |
| <ul> |
| <li><a href="#">二级菜单</a></li> |
| <li><a href="#">二级菜单</a></li> |
| <li><a href="#">二级菜单</a></li> |
| <li><a href="#">二级菜单</a></li> |
| <li><a href="#">二级菜单</a></li> |
| </ul> |
| </li> |
| <li> |
| <a href="#">一级菜单</a> |
| <ul> |
| <li><a href="#">二级菜单</a></li> |
| <li><a href="#">二级菜单</a></li> |
| <li><a href="#">二级菜单</a></li> |
| <li><a href="#">二级菜单</a></li> |
| <li><a href="#">二级菜单</a></li> |
| </ul> |
| </li> |
| <li> |
| <a href="#">一级菜单</a> |
| <ul> |
| <li><a href="#">二级菜单</a></li> |
| <li><a href="#">二级菜单</a></li> |
| <li><a href="#">二级菜单</a></li> |
| <li><a href="#">二级菜单</a></li> |
| <li><a href="#">二级菜单</a></li> |
| </ul> |
| </li> |
| </ul> |
| </div> |
| </body> |
JS代码
| <script> |
| $(function() { |
| $(".menu>ul>li").hover(function() { |
| $(this.querySelector("ul")).slideToggle() |
| }) |
| }) |
| </script> |
JS代码详解：
-
$(function() { ... }): 这是jQuery的快捷方式，用于在DOM加载完成后执行代码。它等价于 $(document).ready(function() { ... })，表示代码会在页面加载完成后执行。
-
$(".menu>ul>li").hover(function() { ... }): 这是一个选择器，它选中所有具有"class"为"menu"的元素中的直接子元素的<li>（列表项）。然后，通过.hover()方法为这些<li>元素添加悬停事件的监听。
-
function() { ... }: 这是一个悬停事件的回调函数。当鼠标悬停在匹配的菜单项上时，这个函数会被执行。
-
$(this.querySelector("ul")).slid
Toggle(): 在悬停事件回调函数中，首先使用this来获取当前鼠标悬停的菜单项元素。然后，通过querySelector("ul")来选择这个菜单项元素下的<ul>（无序列表，也就是子菜单）元素。接着，通过.slideToggle()方法来切换子菜单的显示状态，如果子菜单是隐藏的，则显示它；如果子菜单是显示的，则隐藏它。.slideToggle()方法会为显示和隐藏添加动画效果。
CSS代码
| * { |
| padding: 0; |
| margin: 0; |
| } |
| |
| .menu { |
| background: #910000; |
| } |
| |
| .menu>ul { |
| display: flex; |
| justify-content: space-between; |
| width: 80%; |
| margin: auto; |
| } |
| |
| .menu ul li { |
| list-style: none; |
| } |
| |
| .menu>ul>li { |
| position: relative; |
| } |
| |
| .menu ul li a { |
| padding: 10px; |
| display: block; |
| color: white; |
| text-decoration: none; |
| } |
| |
| .menu ul ul { |
| position: absolute; |
| width: 100%; |
| background: #910000; |
| display: none; |
| } |
CSS代码详解：
* 选择器将页面上所有元素的内边距和外边距设置为0，以消除默认的内边距和外边距。.menu 类选择器选中具有 “menu” 类的元素，设置了背景颜色为深红色 (#910000)。.menu>ul 选择器选中直接子元素是 ul 的 .menu 元素，将其样式设置为弹性布局 (display: flex)，并使用 justify-content: space-between 属性使子元素在水平方向上等间距分布。.menu ul li 选择器选中所有 ul 元素下的 li 元素，并移除其默认的列表样式。.menu>ul>li 选择器选中 .menu 元素下的直接子元素 li，设置其位置为相对定位。.menu ul li a 选择器选中所有 ul 元素内的 li 元素中的锚点 (<a> 标签)，设置了内边距、显示为块级元素、文字颜色为白色、去除下划线。.menu ul ul 选择器选中 ul 元素的子 ul 元素（子菜单），设置其位置为绝对定位，宽度为100%，背景颜色与父菜单一致，且初始状态为不显示。
