javascript - jQuery onclick 问题

Question

不确定 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);
});

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

如果我尝试在手机上单击它，那么悬停不会激活它不会做任何事情，但是如果我交换删除和添加类，它会删除类，然后在 function() 位中添加它们，然后它工作正常。真的很困惑。

有什么想法吗？

Answer 1

那么，在您的第一个代码片段中，您的 click 处理程序中没有任何内容被设置为删除 gn-selected 类；它只是添加类。因此，当然，除非您在点击处理程序中添加代码以删除类，否则点击元素永远不会删除类。

您的第二个片段也不正确。您不能将两个回调传递给 click 处理程序。当您为 hover 执行此操作时，它实际上是 mouseenter/mouseleave 的简写。 click 就是click，仅此而已。您只能传递一个回调。

使用 toggleClass() 可以极大地简化您的整个功能。只需在 mouseenter & click 上切换类，然后在 mouseleave 上将其删除。这不会完全适合你，因为你正在使用其他元素来触发状态(我们不知道这实际上应该是什么样子，因为我们没有 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');
});