Question

我是JavaScript的新手，我想知道，我该如何做到这一点：我有菜单项，然后你点击它，弹出信息框，角落里有X，你关闭它就是这样。但我的目标不仅仅是点击显示它，但即使这样你也将它悬停。这是脚本，如果你需要CSS让我知道。

$('#help').appendTo('.navbar-container .level1');
$('#help a').click(function(e) {
    e.preventDefault();
    if($('#help').hasClass('active')) {
        $('#help').removeClass('active');
    } else {
        $('#help').addClass('active');
    }
    $('#help-block').toggle();
});
$('#help-block .help-close').click(function(e) {
    e.preventDefault();
    $('#help-block').css('display','none');
    $('#help').removeClass('active');
});

谢谢，人！新年快乐。

Answer 1

可以将多个事件绑定到一个.on()方法，例如：

$('#help a').on('click hover', function(e) {
    // continue
});

说明：将一个或多个事件的事件处理函数附加到所选元素。

参考：.on() | jQuery API Documentation

请考虑使用此方法。

Answer 2

像这样使用.on()和mouseover：

$('#help').appendTo('.navbar-container .level1');
$('#help a').on("click mouseover",function(e) {
    e.preventDefault();
    if($('#help').hasClass('active')) {
        $('#help').removeClass('active');
    } else {
        $('#help').addClass('active');
    }
    $('#help-block').toggle();
});
$('#help-block .help-close').on("click mouseover",function(e) {
    e.preventDefault();
    $('#help-block').css('display','none');
    $('#help').removeClass('active');
});

鼠标悬停（显示内容）javascript

2 个答案: