Question

我的体验功能不是很多，而且我已经在努力解决这个问题，因为如果我尝试这样做，它会在代码上显示错误：

这是jquery：

 $("#mainNavigation li").hover(function() {
        $submenu = $(this).toggleClass("activeNav").find(".subMainNavigation").html();
        $("#displaySubmenu").html($submenu);
    }, function() {
        $submenu = $(this).find(".subMainNavigation");
        $("#displaySubmenu").css("display", "none");
    });

    $('#mainNavigation').mouseover(function(){
        $('#displaySubmenu').show();
        $('#mainContent').addClass('curtainBackground');
    });

    $('.wrapperWh').mouseleave(function(){
         $('#mainContent').removeClass('curtainBackground');
    });

我想要实现的是，如果悬停#mainNavigation li，它会将类activeNav添加到

，如果有一个subMainNavigation类，那么我想显示#displaySubmenu 。但是我试着去做，如果那里，并不重要，我把它放在哪里，这是错的。

另外，虽然我可以实现与将鼠标悬停在鼠标悬停上相同的功能，但是如果我将代码添加到鼠标悬停而不是它不起作用！！但是我有一个主要问题.....如果它找到了一个subMainNavigation类，那就把if语句放进去......

这是一个小提琴，看起来有点螃蟹......但它在我的浏览器中看起来还不错...... http://jsfiddle.net/5egzkgfm/

我愿意：

$("#mainNavigation li").hover(function() {
    $submenu = $(this).toggleClass("activeNav");
    if(find(".subMainNavigation").html()) {
    $("#displaySubmenu").html($submenu);
}
}, function() {
    $submenu = $(this).find(".subMainNavigation");
    $("#displaySubmenu").css("display", "none");
});

$('#mainNavigation').mouseover(function(){
    $('#displaySubmenu').show();
    $('#mainContent').addClass('curtainBackground');
});

$('.wrapperWh').mouseleave(function(){
     $('#mainContent').removeClass('curtainBackground');
});

但它根本没有显示任何东西......

谢谢：）

Answer 1

您的if语句不起作用，因为您在其中调用的find函数不存在。 Find是一个jQuery对象函数;你必须在jQuery对象上调用它，例如$（this）。这些错误将出现在控制台中。在Chrome和Firefox中访问控制台：

https://developers.google.com/web/tools/chrome-devtools/debug/console/console-ui https://developer.mozilla.org/en-US/docs/Tools/Web_Console?redirectlocale=en-US&redirectslug=Using_the_Web_Console

工作if语句：

    var subMenu = $(this).find(".subMainNavigation");
    if(subMenu.length) {
        $("#displaySubmenu").html(subMenu.html());
    }

添加activeNav代码的代码无法正常运行。每当用户开始将鼠标悬停在菜单项上时，您都会切换activeNav类，但是当用户停止在菜单项上方停留时，则不会删除该类。

鼠标悬停的行为与悬停略有不同，请参阅此处：when to choose mouseover() and hover() function

结构化功能。无法在现有代码

1 个答案: