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