如何为JavaScript下拉菜单添加点击淡入效果？

嘿，我来帮你搞定这个淡入淡出的小问题～ 先看看你代码里的两个核心问题：

• 你把fadeIn()绑定到了document对象上，这完全找错了目标！动画应该作用在你的下拉菜单容器$overlay上才对呀；
• toggleClass('hidden')和jQuery的fade动画逻辑冲突了——hidden类大概率是给元素加了display: none，而fade系列方法本身就是通过修改display和opacity实现动画的，两者混着用会让动画直接“罢工”。

下面给你两种可行的修正方案，按需选就行：

方案一：直接用fadeToggle实现切换（推荐） #

这个方案最简洁，直接用jQuery的fadeToggle()替代类切换，它会自动根据元素当前状态切换淡入/淡出动画：

$(function () {
  var $overlay = $('.overlay');
  var $toggle = $('.toggle-menu');
  
  var toggleOverlay = function (evt) {
    // 点击菜单外部时淡出关闭
    if (!$(evt.target).closest($overlay).length) {
      $overlay.fadeOut(1000);
    }
  }

  $toggle.click(function (evt) {
    evt.preventDefault();
    evt.stopPropagation();
    // 一键切换淡入淡出状态
    $overlay.fadeToggle(1000);
    // 绑定点击页面其他区域关闭菜单的事件
    $(document).one('click', toggleOverlay);
  });
});

注意：要确保你的.overlay初始状态是display: none，这样第一次点击触发时才能正常淡入。

方案二：保留hidden类的同步方案 #

如果你一定要保留hidden类来控制菜单状态，可以用动画回调来同步类的添加/移除，避免冲突：

$(function () {
  var $overlay = $('.overlay');
  var $toggle = $('.toggle-menu');
  
  var toggleOverlay = function (evt) {
    if (!$(evt.target).closest($overlay).length) {
      // 淡出动画完成后再添加hidden类
      $overlay.fadeOut(1000, function() {
        $(this).addClass('hidden');
      });
    }
  }

  $toggle.click(function (evt) {
    evt.preventDefault();
    evt.stopPropagation();
    
    if ($overlay.hasClass('hidden')) {
      // 先移除hidden类，再执行淡入动画
      $overlay.removeClass('hidden').fadeIn(1000);
    } else {
      // 淡出完成后添加hidden类
      $overlay.fadeOut(1000, function() {
        $(this).addClass('hidden');
      });
    }
    $(document).one('click', toggleOverlay);
  });
});

这样调整后，你的下拉菜单点击时就能正常呈现淡入淡出的效果啦～

内容的提问来源于stack exchange，提问作者Greg