我遇到了jquery子菜单的问题。我有一个水平菜单,其中子菜单slideDown在鼠标悬停和slideUp鼠标离开。子菜单应隐藏在主页上,并仅在悬停时显示每个菜单。在其他页面上,菜单应显示onload。它现在不像那样工作。 这是代码:
$('ul.menu > li:not(.has-active)').mouseover(function( ){
var $self = $(this);
pos_dd_nav( $self );
$self.find('a').removeClass('dimmed');
if( activeElem && $self.find('ul.sub-menu').length ){
$('ul.active-subnav').hide();
$self.find('ul.sub-menu').show();
} else if( $self.find('ul.sub-menu').length ) {
$('.sub-header').stop(true, true).slideDown('fast');
$self.find('ul.sub-menu').stop(true, true).slideDown('fast');
}else{
$('ul.active-subnav').stop().slideUp('fast');
$('.sub-header').stop().slideUp('fast');
$('.sub-header').find('span.down-arrow').stop().slideUp('fast');
}
}).mouseleave(function( e ){
var $self = $(this);
var left_offset = $('ul.active-subnav').closest('li').offset().left,
li_width = $('ul.active-subnav').closest('li').width(),
arrow_pos = left_offset + ( li_width/2 - 3 );
if( activeElem && $self.find('ul.sub-menu').length ){
$self.find('ul.sub-menu').hide();
$('ul.active-subnav').show();
$('.sub-header').find('span.down-arrow').css('left', arrow_pos );
} else if( $self.find('ul.sub-menu').length ) {
$('.sub-header').stop(true, true).slideUp('fast');
$self.find('ul.sub-menu').stop(true, true).slideUp('fast');
} else if ( !$(e.relatedTarget).is('li') || $(e.relatedTarget).is('li:has(.sub-menu)') ) {
$('.sub-header').slideDown('fast');
$('ul.active-subnav').slideDown('fast');
$('.sub-header').find('span.down-arrow').css('left', arrow_pos ).slideDown('fast');
}
});
$(window).load(function(){
$('.sub-header.home').hide();
$('ul.sub-menu.home').hide();
$('.sub-menu').each(function(){
var $self = $(this);
if($self.find('.active').length){
//$('.sub-header.home').hide();
//$('.sub-header').show();
$self.addClass('active-subnav');
$self.closest('li').addClass('has-active')
pos_dd_nav( $self.closest('li') );
}
});
})
var $self = $(this);
function pos_dd_nav( $self ){
var li_offset = $self.offset(),
li_w = $self.width(),
wrapper_w = $('#header .wrapper').width(),
wrapper_offset = $('#header .wrapper').offset(),
left_pos_list = li_offset.left - wrapper_offset.left,
left_pos_arrow = li_offset.left + ( li_w/2 - 3 );
$('.sub-header').find('span.down-arrow').css('left', left_pos_arrow );
$self.find('ul.sub-menu').css({
width: wrapper_w,
left: -left_pos_list
});
}