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

如果应用了2个类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);
});

但是它仍然无法正常工作，但这次它确实有效。当您将鼠标悬停在它上面并单击它会隐藏菜单，但重新点击它不会显示菜单。

如果我尝试在手机上点击它，所以悬停不会激活它什么都不做但是如果我交换删除和添加类，所以它删除类，然后在函数（）位添加它们工作正常后。真的很困惑。

有什么想法吗？

Answer 1

好吧，在您的第一个代码段中，click处理程序中的任何内容都未设置为删除gn-selected类;它只是添加了这个类。当然，除非您添加代码以在单击处理程序中删除该类，否则单击该元素将永远不会删除该类。

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

使用toggleClass()可以极大地简化您的整个功能。只需在mouseenter＆amp;中切换课程即可。单击，然后在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');
});

jQuery onclick问题

1 个答案: