为什么jQuery停止点击事件？

问题描述：

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

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; 
    } 
    }); 
}

代码也可以在这里： https://github.com/Kevin-Murda/SiteFichte/blob/c4122cdb6fb61a57adebc1b7f6863d8530b37ebd/pub/js/main.js#L144

为什么不使用CSS Media Queries解决这个问题？ –

问题是，该类将只应用一次。 –

答

在这种情况下，问题是由打开菜单后会重叠汉堡包按钮，但是你看到这个按钮，而不是点击菜单，而不是按钮，这一切都发生，因为我用了padding-top而不是margin-从顶部到位置菜单，现在解决了，感谢所有帮助过我的人。

答

使用addClass()和removeClass()。如果这是一个切换，您应该在第二次点击时删除该类。

如何应用类有多种不同的方法，但它不能解决点击事件只触发一次的问题。 –

是的，但你永远不会删除公开课。如果您在第二次点击后查看DOM，是否同时应用了这两个类？ –

因为attr将删除everthing并将只应用我指定的值（类）。 –

答

更新

当你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'); 
    }); 
}

this.menuOpen在构建时设置为false，请查看：https：//github.com/Kevin-Murda/SiteFichte/blob/c4122cdb6fb61a57adebc1b7f6863d8530b37ebd/pub/js/main.js#L9 –

@KevinMurda由于它仅用于为此，您不需要它，只需切换“open”类并相应地调整CSS即可。其次，处理程序中使用的'this'是对汉堡包元素的引用，并且与'Site function'中使用的不同，所以要继续使用它，请将'var site = this;'放在原始文件中代码 – LGSon

试过你的解决方案，它仍然不会关闭后我打开这个菜单，如果你告诉我这是由范围引起的，为什么它的工作和跟踪menuOpen变量，如果我不使用jQuery功能？ –

答

忧虑

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

如果您从代码中删除查询部分，则会执行此操作。类menuOpen在构造对象时设置为false。 –

如果你把这条线移动“event.stopPropagation（”在你的else语句结束时终止事件 – 2017-02-18 23:08:39

仍然只工作1，完全删除它，因为它在这个函数中似乎是无用的东西 –

为什么jQuery停止点击事件？

相关推荐