TAGS :Viewed: 11 - Published at: a few seconds ago

[ structuring functions. Can't add if statement within the existing code ]

I'm not very experience doing functions longer than a couple of lines, and I'm struggling with this one already as it displays errors on the code if I try to do it:

This is the 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');
    });

What I'm trying to achieve is that if hover #mainNavigation li, it adds the class activeNav to that

  • , and IF there is a subMainNavigation class, then I want to display #displaySubmenu. But I am trying to do the if there, and doesn't matter where I put it, it's wrong.

    Also, I've though I can achieve the same I'm doing with hover to mouse over, but If I add the code to mouseover instead it's just doesn't work!! But the main issue I have..... it's to put the if statement if it finds a subMainNavigation class...

    Here is a fiddle, it looks a bit crab... but it looks alright in my browser....http://jsfiddle.net/5egzkgfm/

    I would do:

    $("#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');
    });
    

    But then it doesn't display anything at all...

    Thank you :)

    Answer 1


    Your if statement doesn't work because the find function you called in it doesn't exist. Find is a jQuery object function; you have to call it on a jQuery object, such as $(this). Errors like these will appear in the console. Accessing the console in Chrome and 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

    A working if statement:

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

    Your code for adding the activeNav code doesn't work properly. You're toggling the activeNav class whenever the user starts hovering over a menu item but not removing the class when the user stops hovering over a menu item.

    Mouseover behaves slightly differently to hover, see here: when to choose mouseover() and hover() function