打开子菜单 jQuery - JavaScript

在网页开发中，我们常会遇到需要打开子菜单的情况。通过使用 jQuery 可以方便地实现在鼠标悬浮于菜单项上时弹出子菜单的效果。

代码实现

以下是实现子菜单弹出效果的代码：

// HTML
<ul class="menu">
  <li>
    <a href="#">菜单项1</a>
    <ul>
      <li><a href="#">子菜单项1</a></li>
      <li><a href="#">子菜单项2</a></li>
      <li><a href="#">子菜单项3</a></li>
    </ul>
  </li>
  <li>
    <a href="#">菜单项2</a>
    <ul>
      <li><a href="#">子菜单项1</a></li>
      <li><a href="#">子菜单项2</a></li>
      <li><a href="#">子菜单项3</a></li>
    </ul>
  </li>
  <li>
    <a href="#">菜单项3</a>
    <ul>
      <li><a href="#">子菜单项1</a></li>
      <li><a href="#">子菜单项2</a></li>
      <li><a href="#">子菜单项3</a></li>
    </ul>
  </li>
</ul>

// CSS
.menu li ul {
  display: none;
  position: absolute;
}
.menu li:hover > ul {
  display: block;
}

// jQuery
$('.menu li').hover(
  function() {
    $(this).children('ul').stop().slideDown(200);
  },
  function() {
    $(this).children('ul').stop().slideUp(200);
  }
);

在 HTML 中，我们定义了一个包含菜单项和子菜单的结构。在 CSS 中，我们给子菜单添加了 display: none 的属性使其初始状态下不显示，并通过 .menu li:hover > ul 选择器来定义在鼠标悬浮于菜单项上时弹出子菜单的样式。

在 jQuery 中，我们使用了 .hover() 方法，它是 .mouseenter() 和 .mouseleave() 方法的结合体。当鼠标指针进入与匹配元素集合中的元素时，会依次触发传入的第一个函数。当鼠标移出该元素时，会依次触发传入的第二个函数。

在这段代码中，我们通过 $(this).children('ul').stop().slideDown(200) 来实现子菜单的弹出效果，通过 $(this).children('ul').stop().slideUp(200) 来实现子菜单的收起效果。

总结

通过使用 jQuery，我们可以轻松地为菜单添加子菜单弹出效果。代码实现简单易懂，菜单的样式也可以根据实际需求自行调整。