jquery下拉菜单

jQuery 下拉菜单实现方法

使用 jQuery 可以轻松实现下拉菜单效果，以下是几种常见的方法：

基础下拉菜单实现

HTML 结构：

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

jQuery 代码：

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

鼠标悬停触发下拉

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

带动画效果的下拉菜单

$('.dropdown-toggle').click(function(){
  $('.dropdown-menu').slideToggle(300);
});

高级下拉菜单功能

阻止事件冒泡

$('.dropdown-menu').click(function(e){
  e.stopPropagation();
});

$(document).click(function(){
  $('.dropdown-menu').hide();
});

带延迟关闭的下拉菜单

var timer;
$('.dropdown').hover(
  function(){
    clearTimeout(timer);
    $('.dropdown-menu', this).fadeIn(200);
  },
  function(){
    var that = this;
    timer = setTimeout(function(){
      $('.dropdown-menu', that).fadeOut(200);
    }, 300);
  }
);

响应式下拉菜单

移动设备适配

$(window).resize(function(){
  if($(window).width() < 768){
    $('.dropdown-menu').css('display', 'none');
    $('.dropdown-toggle').click(function(){
      $(this).next('.dropdown-menu').slideToggle();
    });
  } else {
    $('.dropdown-menu').css('display', '');
  }
});

带键盘导航的下拉菜单

$('.dropdown-toggle').keydown(function(e){
  if(e.keyCode === 13 || e.keyCode === 32){
    e.preventDefault();
    $(this).click();
  }
});

$('.dropdown-menu li a').keydown(function(e){
  if(e.keyCode === 27){
    $('.dropdown-menu').hide();
  }
});

性能优化建议

• 使用事件委托处理动态生成的菜单项

  $(document).on('click', '.dropdown-toggle', function(){
  $(this).next('.dropdown-menu').toggle();
  });

• 缓存 jQuery 选择器结果

  var $dropdown = $('.dropdown');
  $dropdown.find('.dropdown-toggle').click(function(){
  $dropdown.find('.dropdown-menu').toggle();
  });

• 使用 CSS 过渡替代 jQuery 动画

  .dropdown-menu {
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  }
  .dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  }

$('.dropdown-toggle').click(function(){
  $('.dropdown-menu').toggleClass('show');
});