jQuery onclick issues

jQuery onclick issues

本文关键字：issues onclick jQuery      更新时间：2023-09-26

不确定onclick部分是否工作，基本上它是一个.hover & .onclick按钮，你可以将鼠标悬停在它上面打开菜单，你可以点击打开和关闭它，如果它已经打开了，那么它就关闭了。

但是我的代码不做onclick位。只有悬停似乎有效。

var GN_SELECTED = 'gn-selected';
var GN_OPEN_ALL = 'gn-open-all';
var menuIcon = $("#menuicon");
var menuWrapper = $("#menuwrapper");
menuIcon.click(function() {
    menuIcon.addClass(GN_SELECTED);
    menuWrapper.addClass(GN_OPEN_ALL);
});
$("#menuicon, #menuwrapper, .gn-menu, .gn-scrollbar").hover(function() {
    menuIcon.addClass(GN_SELECTED);
    menuWrapper.addClass(GN_OPEN_ALL);
}, function() {
    menuIcon.removeClass(GN_SELECTED);
    menuWrapper.removeClass(GN_OPEN_ALL);
});

如果应用了两个类gn-selected和gn-open-all，它使用响应式CSS来打开菜单。

当鼠标悬停但不点击时，它工作得很好，如果它已经打开(从悬停在它上面)，然后点击它应该关闭它，但它似乎没有做任何事情。

现在是凌晨3:36，我累了，谁能指出我明显的错误?

编辑:我试着稍微复制一下悬停代码，然后这样做:

var GN_SELECTED = 'gn-selected';
var GN_OPEN_ALL = 'gn-open-all';
var menuIcon = $("#menuicon");
var menuWrapper = $("#menuwrapper");
menuIcon.click(function(){
  menuIcon.addClass(GN_SELECTED);
  menuWrapper.addClass(GN_OPEN_ALL);
}, function(){
  menuIcon.removeClass(GN_SELECTED);
  menuWrapper.removeClass(GN_OPEN_ALL);
});
$("#menuicon, #menuwrapper, .gn-menu, .gn-scrollbar").hover(function(){
  menuIcon.addClass(GN_SELECTED);
  menuWrapper.addClass(GN_OPEN_ALL);
}, function(){
  menuIcon.removeClass(GN_SELECTED);
  menuWrapper.removeClass(GN_OPEN_ALL);
});

但是它仍然不能正常工作，但这次它做了一些事情。当你将鼠标悬停在它上面并单击它时，它会隐藏菜单，但是重新单击它不会显示菜单。

如果我尝试点击它在手机上，所以悬停不激活它不做任何事情，但如果我交换删除和添加类，所以它删除类，然后在函数()位添加它们后，它的工作很好。真的很困惑。

任何想法?

好吧，在您的第一个代码片段中，没有在您的click处理程序设置为删除gn-selected类;它只是添加类。因此，当然，除非您在click处理程序中添加删除类的代码，否则单击元素永远不会删除该类。

你的第二个片段也是不正确的。您不能将两个回调传递给click处理程序。当你对hover这样做时，它实际上是mouseenter/mouseleave的简写。click就是click，仅此而已。你只能通过一个回调。

使用toggleClass()可以极大地简化整个函数。只需在鼠标上切换这个类单击，并在鼠标左键上删除它。这并不完全适用于您，因为您正在使用其他元素来触发状态(我们不知道这实际上应该是什么样子，因为我们没有html/css)，但它至少应该指向正确的方向:

$('#menuicon').on('click mouseenter', function() {
    $(this).toggleClass('gn-selected');
    $('#menuwrapper').toggleClass('gn-open-all');
}).on('mouseleave', function() {
    $(this).removeClass('gn-selected');
    $('#menuwrapper').removeClass('gn-open-all');
});
相关文章：