Question

我正在创建一个响应式菜单，我正在开发一个功能，当用户在其外部点击时关闭菜单，因此当用户点击网站的任何其他部分时（当然，如果菜单打开）。一切似乎都很简单，有两个功能：

1st）点击html的任何部分时关闭菜单

$('html').click(function () {

if (jQuery("#responsive_header").hasClass("tvda_header responsive")) {

document.getElementById("responsive_header").className = "tvda_header";

}

});

第2步）单击菜单按钮时打开菜单

$('#h_r3').click(function () {

var x = document.getElementById("responsive_header");

if (x.className === "tvda_header") { x.className += " responsive"; }

});

这两个功能都有效，但它之间存在冲突。当我单击按钮打开菜单（div id =“h_r3”）时，div类“tvda_header”变为“tvda_header responsive”并被第1个函数检测到，当然通过删除“响应”将其再次更改为“tvda_header” “上课。

我尝试更改功能的顺序或使用触发器在第一个之后运行第二个但没有成功。

有什么建议吗？

Answer 1

使用event.stopPropagation()

停止按钮点击中的事件传播

$('#h_r3').click(function (event) {
   event.stopPropagation()
   var x = document.getElementById("responsive_header");

   if (x.className === "tvda_header") { x.className += " responsive"; }

});

Jquery中.hasClass和addClass（）之间的冲突

1 个答案: