Javascript 为什么jQuery在单击事件时中断？

我正在尝试为手机屏幕大小创建菜单/导航。我已经创建了一个变量来跟踪菜单是否打开，如果它随后将类“打开”添加到ul，但它只会第一次工作，然后停止，但是如果我删除了将类添加到ul的jQuery代码，那么它会像支持一样继续工作，导致click事件中断的问题可能是什么

Site.prototype.hamburgerHandler = function() {
  var site = this;
  $('#hamburger').click(function(event) {
    event.stopPropagation();
    if(!site.menuOpen) {
      $('nav ul').attr('class', 'open');
      site.menuOpen = true;
    } else {
      $('nav ul').attr('class', 'closed');
      site.menuOpen = false;
    }
  });
}

代码也可在此处获得： 使用

addClass（）

和

removeClass（）

。如果这是一个切换，您应该在第二次单击该类时将其删除。

已更新

当你做

var site=this

您将获得对处理程序所附加元素的引用，作为名为

site

的局部范围变量

通过删除行

var site=this

，

site.menuOpen

将引用全局定义的

site

---

更简单的解决方案是切换

open

类，而不用担心设置任何变量

Site.prototype.hamburgerHandler = function() {
  $('#hamburger').click(function(event) {
    event.stopPropagation();
    $('nav ul').toggleClass('open');
  });
}

---

menuOpen没有定义，这就是为什么它从不遍历循环。

在这种情况下，问题是因为打开菜单后，它将重叠汉堡按钮，而您看到的是这个按钮，您单击的是菜单而不是按钮，这一切都是因为我使用了填充顶部而不是边距顶部来定位菜单，现在解决了，感谢大家的帮助。

为什么不使用CSS媒体查询来解决这个问题？问题是类将只应用一次。应用类的方法多种多样，但它不能解决单击事件只触发一次的问题。是的，但您永远不会删除打开的类。如果在第二次单击后查看DOM，是否应用了这两个类？因为attr将删除所有内容，并仅应用我指定的值（类）。如果从代码中删除查询部分，则会这样做。在类中，menuOpen在构造对象时设置为false。如果移动此行“event.stopPropagation（”在else语句末尾终止事件。仍然只起作用1，完全删除它，因为它在这个函数中似乎是无用的东西。你能在开始时将menuOpen设置为true吗？也许这很重要？this.menuOpen在构造时设置为false，请在@KevinMurda处检查它，因为它仅用于此目的，所以你不需要它，简单地说切换

open

类并相应地调整CSS。其次，处理程序中使用的

this

是对hamburger元素的引用，与

Site function

中使用的元素不同，因此要继续使用它，请删除原始代码中的

var Site=this；

尝试了您的解决方案，但仍然无法使用在我打开菜单后丢失，如果你告诉我这是由作用域引起的，那么如果我不使用jQuery函数，它为什么工作并跟踪menuOpen变量？我得到了修复，它从未关闭的原因是，在我打开菜单后，它将重叠汉堡包按钮，而无论我如何看到汉堡包按钮，我都在点击菜单，我将padding top改为margin top，解决了这个问题。由于您的解决方案比我使用的更干净，我将使用您的解决方案，谢谢。当然，我现在正在使用您的解决方案，我只是在stackoverflow中有点新手，所以我仍然在学习社区中的一切工作方式以及用户可以执行的操作，我一直在阅读解决方案但从未真正询问或发布过任何东西，干杯。