移动端下拉菜单无法关闭：Click函数else语句未执行问题

首先咱们直奔核心问题：你的代码逻辑里存在一个错位的类操作——你在判断触发按钮#serviceClick是否拥有activeSol类，但实际所有的addClass/removeClass操作都是作用在菜单容器#serviceNav上的！这就导致relative（也就是#serviceClick）永远不会有activeSol类，!relative.hasClass('activeSol')永远为true，else分支自然永远不会执行。

修正方案一：同步触发按钮的类状态 #

把activeSol类同时加到触发按钮上，让判断逻辑和操作对象对应起来：

$('#serviceClick').click(function () {
  var relative = $(this);
  var serviceNav = $('#serviceNav');
  if (!relative.hasClass('activeSol')) {
    serviceNav.addClass('activeSol').slideDown();
    relative.addClass('activeSol'); // 给触发按钮加上类，同步状态
  } else {
    serviceNav.removeClass('activeSol').slideUp(500);
    relative.removeClass('activeSol'); // 移除触发按钮的类，同步状态
  }
  return false;
});

修正方案二：直接判断菜单的可见状态（无需依赖类名） #

如果不想维护额外的类名，也可以直接通过菜单的显示状态来切换，逻辑更直观：

$('#serviceClick').click(function () {
  var serviceNav = $('#serviceNav');
  if (serviceNav.is(':hidden')) {
    serviceNav.slideDown();
  } else {
    serviceNav.slideUp(500);
  }
  return false;
});

另外补充一下：你之前尝试把click改成change事件是行不通的，因为change事件只针对表单控件（比如<select>、<input>这类），普通的按钮/链接元素点击不会触发change事件，所以菜单自然无法展开。

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