如何使用此js文件始终在垂直菜单中显示子菜单?

时间:2015-01-29 20:09:54

标签: javascript menu hover show

我的问题是,如果有人知道在下面的js文件中要更改什么,以便始终在垂直菜单上显示子菜单,这意味着在页面加载时显示子菜单并保持显示我是否将鼠标悬停在其上,明确将其设置为部分垂直菜单而不是隐藏的子菜单,您必须将鼠标悬停在要访问的父类别上。 我需要在以下代码中更改以实现这一点,: 先谢谢你们!

     * DC Vertical Mega Menu - jQuery vertical mega menu
     * Copyright (c) 2011 Design Chemical

 *
 * Dual licensed under the MIT and GPL licenses:
 *  http://www.opensource.org/licenses/mit-license.php
 *  http://www.gnu.org/licenses/gpl.html
 *
 */
(function($){


    //define the new for the plugin ans how to call it  
    $.fn.dcVerticalMegaMenu = function(options){
        //set default options  
        var defaults = {
            classParent: 'dc-mega',
            arrow: true,
            classArrow: 'dc-mega-icon',
            classContainer: 'sub-container',
            classSubMenu: 'sub',
            classMega: 'mega',
            classSubParent: 'mega-hdr',
            classSubLink: 'mega-hdr',
            classRow: 'row',
            rowItems: 3,
            speed: 'fast',
            effect: 'show',
            direction: 'right',
            menubg: '0',
            menufixwidth: '0',
            menufixheight: '0'
        };


        //call in the default otions
        var options = $.extend(defaults, options);
        var $dcVerticalMegaMenuObj = this;

        //act upon the element that is passed into the design    
        return $dcVerticalMegaMenuObj.each(function(options){

            $mega = $(this);
            if(defaults.direction == 'left'){
                $mega.addClass('left');
            } else {
                $mega.addClass('right');
            }
            // Get Menu Width
            var megaWidth = $mega.width();


            // Set up menu
            $('> li',$mega).each(function(){

                var $parent = $(this);
                var $megaSub = $('> ul',$parent);



                if($megaSub.length > 0){

                $('> a',$parent).addClass(defaults.classParent).append('<span class="'+defaults.classArrow+'"></span>');
                    $megaSub.addClass(defaults.classSubMenu).wrap('<div class="'+defaults.classContainer+'" />');
                    var $container = $('.'+defaults.classContainer,$parent);
                    if($('ul',$megaSub).length > 0){

                        $parent.addClass(defaults.classParent+'-li');
                        $container.addClass(defaults.classMega);

                        // Set sub headers
                        $('> li',$megaSub).each(function(){
                            $(this).addClass('mega-unit');
                            if($('> ul',this).length){
                                $(this).addClass(defaults.classSubParent);                              
                                $('> a',this).addClass(defaults.classSubParent+'-a');
                            } else {
                                $(this).addClass(defaults.classSubLink);
                                $('> a',this).addClass(defaults.classSubLink+'-a');
                            }
                        });

                            $('> li li',$megaSub).each(function(){
                            if($('> ul',this).length){
                              $(this).addClass('mega-sub3'); //rajib
                               $('.mega-sub3 ul').addClass("show3div");
                            } 
                        });                             

                    } else {
                        $container.addClass('non-'+defaults.classMega);
                        if(defaults.menubg==1){                         
                            var catimages =$('.non-'+defaults.classMega).closest("li").attr('id'); 
                            catimages = catimages.replace(/\s+/g, '-').toLowerCase();
                            $('.non-'+defaults.classMega).css('background','#333 url(modules/leftmegamenu/bgimages/'+catimages+'.gif) no-repeat right bottom');
                        }
                    }
                } 

                var $container = $('.'+defaults.classContainer,$parent);
                var subWidth = $megaSub.outerWidth(true);
                var subHeight = $container.height();

                    if(defaults.menufixwidth>0){
                            var subWidth = defaults.menufixwidth;
                            }                           
                    if(defaults.menufixheight>0){
                            var subHeight = defaults.menufixheight; 
                        }

                var itemHeight = $parent.outerHeight(true);
                // Set position to top of parent
                $container.css({                    
                    height: subHeight+'px',
                    width: subWidth+'px',                               
                    zIndex: '1000'
                }).hide();
            });





            // HoverIntent Configuration
            var config = {
                sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
                interval: 10, // number = milliseconds for onMouseOver polling interval
                over: megaOver, // function = onMouseOver callback (REQUIRED)
                timeout: 0, // number = milliseconds delay before onMouseOut
                out: megaOut // function = onMouseOut callback (REQUIRED)
            };





            $('li',$dcVerticalMegaMenuObj).hoverIntent(config);

            function megaOver(){
                $(this).addClass('mega-hover');
                var $link = $('> a',this);
                var $subNav = $('.sub',this);
                var $container = $('.sub-container',this);
                var width = defaults.menufixwidth;
                var outerHeight = $container.outerHeight();
                var height = defaults.menufixheight;                
                var itemHeight = $(this).outerHeight(true);
                var offset = $link.offset();
                var scrollTop = $(window).scrollTop();
                var offset = offset.top - scrollTop
                var bodyHeight = $(window).height();
                var maxHeight = bodyHeight - offset;
                var xsHeight = maxHeight - outerHeight;

                if(defaults.menubg==1){                         
                            var catimages =$(this).closest("li").attr('id'); 
                            catimages = catimages.replace(/\s+/g, '-').toLowerCase();                                               

                $container.css({
                            background: '#333 url(modules/leftmegamenu/bgimages/'+catimages+'.gif) no-repeat right bottom'
                        });
                }

            if(xsHeight < 0){
                    var containerMargin = xsHeight - itemHeight;
                    $container.css({marginTop: containerMargin+'px'});
                }

                var containerPosition = {right: megaWidth};
                if(defaults.direction == 'right'){
                    containerPosition = {left: megaWidth};
                }

                if(defaults.effect == 'fade'){
                    $container.css(containerPosition).fadeIn(defaults.speed);
                }
                if(defaults.effect == 'show'){
                    $container.css(containerPosition).show();
                }
                if(defaults.effect == 'slide'){
                    $container.css({
                        width: 0,
                        height: 0,
                        opacity: 0});

                    if(defaults.direction == 'right'){

                        $container.show().css({
                            left: megaWidth
                        });
                    } else {

                        $container.show().css({
                            right: megaWidth
                        });
                    }
                    $container.animate({
                            width: width,
                            height: height,                         
                            opacity: 1
                        }, defaults.speed);
                }
            }

            function megaOut(){
                $(this).removeClass('mega-hover');
                var $container = $('.sub-container',this);
                $container.hide();
            }
        });
    };





})(jQuery);


$(document).ready(function($){  
// menu slide hoverIntend
$('#rajbrowsecat').hoverIntent({    
     over: startHover,
     out: endHover,
     timeout: 1000
    });

    function startHover(e){   
    $('#rajdropdownmenu').slideDown(200)
 }

 function endHover(){     
     $('#rajdropdownmenu').slideUp(600)
 }
// menu slide hoverIntend


$('#rajmegamenu').dcVerticalMegaMenu({
        rowItems: '5',
        speed: 'fast',
        effect: 'slide',
        direction: 'right',
        menubg: '1',
        menufixwidth: '236',
        menufixheight: '155'
    });


});

1 个答案:

答案 0 :(得分:0)

更新:   所以我设法通过从行&#34; // HoverIntent配置&#34;中删除与悬停效果相关的所有代码(带/ *)来实现。到&#34; //菜单幻灯片hoverIntend&#34;并且通过将css略微用于演示,似乎总是显示子菜单,但对于那些感兴趣的人我也找到了一种方法,通过向css添加行&#34; height:auto&#34 ;,似乎工作相当不错。 无论如何,无论如何,感谢你们的回答,我们总是很高兴知道,当我们被困住时,我们有一个你可以求助的地方!