当前位置：首页 > jquery

jquery下拉菜单

2026-02-03 09:19:57jquery

jQuery 下拉菜单实现方法

使用 jQuery 实现下拉菜单可以通过多种方式完成，以下是一些常见的方法：

基础下拉菜单实现

通过 jQuery 的 slideToggle() 或 toggle() 方法实现下拉效果：

$(document).ready(function(){
  $(".dropdown-toggle").click(function(){
    $(".dropdown-menu").slideToggle();
  });
});

鼠标悬停触发下拉

使用 hover() 方法实现鼠标悬停时显示下拉菜单：

$(".dropdown").hover(function(){
  $(this).find(".dropdown-menu").stop(true, true).slideDown();
}, function(){
  $(this).find(".dropdown-menu").stop(true, true).slideUp();
});

动画效果增强

添加自定义动画效果使下拉更平滑：

$(".dropdown-toggle").click(function(){
  $(".dropdown-menu").animate({
    height: "toggle",
    opacity: "toggle"
  }, 300);
});

多级下拉菜单实现

对于多级嵌套的下拉菜单：

$(".dropdown > a").click(function(e){
  e.preventDefault();
  $(this).next(".submenu").slideToggle();
  $(this).parent().siblings().find(".submenu").slideUp();
});

注意事项

确保 HTML 结构正确，通常需要嵌套的 ul/li 结构
CSS 中初始状态应隐藏下拉菜单（display: none）
考虑移动设备上的触摸事件兼容性
使用 stop() 方法防止动画队列堆积

完整示例代码

<style>
.dropdown-menu {
  display: none;
}
</style>

<div class="dropdown">
  <button class="dropdown-toggle">菜单</button>
  <ul class="dropdown-menu">
    <li>选项1</li>
    <li>选项2</li>
    <li>选项3</li>
  </ul>
</div>

<script>
$(document).ready(function(){
  $(".dropdown-toggle").click(function(){
    $(".dropdown-menu").slideToggle();
  });
});
</script>

jquery下拉菜单