This is my Jquery for my tabbed menu:
var current = $('li.selected');
$('li.selected #submenu').css("display", "block").addClass('lihovered');
current.addClass('lihovered');
$("ul#ulmenu li").hover(function() { //Hover over event on list item
$(this).find("#submenu").show(); //Show the subnav
$(this).addClass('lihovered');
current.removeClass('lihovered');
} , function() { //on hover out...
$(this).find("#submenu").hide(); //Hide the subnav
$(this).removeClass('lihovered');
current.addClass('lihovered');
});
$("ul#submenu").hover(function() { //Hover over event on list item
$(this).show(); //Show the subnav
$(this).parent("li").addClass('lihovered');
$(this).parent("li").find('a').addClass('lihovereda');
} , function() { //on hover out...
$(this).find("#submenu").hide(); //Hide the subnav
$(this).parent("li").removeClass('lihovered');
$(this).parent("li").find('a').removeClass('lihovereda');
current.addClass('lihovered');
});
The problem is that when hovered hover the li that is selected the bagground is removed. Therefor I want to disable this function:
$("ul#ulmenu li").hover(function() { //Hover over event on list item
$(this).find("#submenu").show(); //Show the subnav
$(this).addClass('lihovered');
current.removeClass('lihovered');
} , function() { //on hover out...
$(this).find("#submenu").hide(); //Hide the subnav
$(this).removeClass('lihovered');
current.addClass('lihovered');
});
for $('li.selected');
And I also have that problem when hovering hover an another li element in the menu the selected submenu gets hidden. Therefor I want to disable this function:
$("ul#submenu").hover(function() { //Hover over event on list item
$(this).show(); //Show the subnav
$(this).parent("li").addClass('lihovered');
$(this).parent("li").find('a').addClass('lihovereda');
} , function() { //on hover out...
$(this).find("#submenu").hide(); //Hide the subnav
$(this).parent("li").removeClass('lihovered');
$(this).parent("li").find('a').removeClass('lihovereda');
current.addClass('lihovered');
});
for $('li.selected #submenu');
The problem is that the #li.selected #submenu gets hidden when hovering over the submenu or the li element. Which it should not do.
Update, I have tried this but it is (was not) working:
$("ul#ulmenu li").hover(function() { //Hover over event on list item
if($(this).hasClass('selected')) {
} else {
$(this).find("#submenu").show(); //Show the subnav
$(this).addClass('lihovered');
current.removeClass('lihovered');
}
} , function() { //on hover out...
$(this).find("#submenu").hide(); //Hide the subnav
$(this).removeClass('lihovered');
current.addClass('lihovered');
});
But it is very ugly with if else statements.
Use the not() method: http://api.jquery.com/not/
$("ul#ulmenu li").not('.selected').hover(function() {
and :not selector http://api.jquery.com/not-selector/
$('li:not(.selected) ul#submenu').hover(function() {
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.