Jquery下拉子菜单

时间:2013-04-09 19:37:39

标签: jquery submenu

我遇到了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
        });
    }

0 个答案:

没有答案