mardi 3 novembre 2015

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://ift.tt/1Naklbm

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 :)

Aucun commentaire:

Enregistrer un commentaire