jQuery中.hasClass与addClass()的冲突问题咨询

这个问题的核心是事件冒泡在搞鬼！当你点击菜单按钮#h_r3时，点击事件会从按钮本身向上冒泡到它的父元素，最终到达<html>标签——这就导致你刚给菜单加上responsive类，绑定在<html>上的关闭函数就立刻触发，把类又改回去了。

下面给你两种简单有效的解决方案：

方案一：阻止按钮点击事件的冒泡 #

在菜单按钮的点击处理函数里，加入event.stopPropagation()，切断事件向上传递的路径，这样点击按钮时就不会触发<html>上的关闭逻辑了：

$('#h_r3').click(function (event) {
  // 阻止事件冒泡到父元素（包括html）
  event.stopPropagation();
  var x = document.getElementById("responsive_header");
  if (x.className === "tvda_header") {
    x.className += " responsive";
  }
});

如果你想让代码更简洁，还可以用jQuery的toggleClass来简化类的切换：

$('#h_r3').click(function (event) {
  event.stopPropagation();
  $("#responsive_header").toggleClass("responsive");
});

方案二：在全局关闭函数里过滤点击目标 #

另一种思路是，在<html>的点击事件里判断：如果点击的目标是菜单按钮、菜单容器，或者它们的子元素，就不执行关闭操作。这样即使事件冒泡上来，也会自动跳过处理：

$('html').click(function (event) {
  // 检查点击的元素是否属于菜单按钮或菜单容器的后代
  if (!$(event.target).closest('#h_r3, #responsive_header').length) {
    var header = $("#responsive_header");
    if (header.hasClass("responsive")) {
      header.removeClass("responsive");
    }
  }
});

这种方法的好处是，即使后续菜单里添加了可点击的子元素（比如下拉选项），点击这些元素也不会误关菜单，兼容性更好。

两种方案都能解决你的冲突问题，你可以根据自己的代码习惯选择其中一种~

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