jQuery实现二级菜单

作者：System 时间：2024年08月17日分类：所有,jquery 字数：1176

以下是使用jQuery实现二级菜单的简单示例代码：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 二级菜单示例</title>
<style>
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  .menu > li {
    position: relative;
    float: left;
    margin-right: 15px;
  }
  .menu li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
  }
</style>
</head>
<body>
 
<ul class="menu">
  <li><a href="#">一级菜单1</a>
    <ul>
      <li><a href="#">二级菜单1-1</a></li>
      <li><a href="#">二级菜单1-2</a></li>
    </ul>
  </li>
  <li><a href="#">一级菜单2</a>
    <ul>
      <li><a href="#">二级菜单2-1</a></li>
      <li><a href="#">二级菜单2-2</a></li>
    </ul>
  </li>
</ul>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    $('.menu li').hover(function() {
      $(this).find('ul').first().stop(true, true).slideDown(150);
    }, function() {
      $(this).find('ul').first().stop(true, true).slideUp(150);
    });
  });
</script>
 
</body>
</html>

这段代码使用了jQuery的hover方法来控制二级菜单的显示和隐藏，通过slideDown和slideUp方法实现了平滑的下滑和上滑效果。这是一个简单的二级菜单实现，可以根据需要进行样式调整和功能扩展。

jQuery实现二级菜单

评论已关闭

推荐阅读