2016-06-09 52 views
0

我想修改相当复杂的jQuery菜单。jQuery关闭由鼠标打开的子菜单

本来,它在.click上打开,但我希望它在悬停(.mouseenter)上打开。

我已经做了改变,你可以在主菜单here看到它。

问题是,当鼠标输入没有子的主链接时,任何打开的子保持打开状态。

如您所见,有一个slideUpPanel()函数。它与.click协同工作,但使用.mouseenter,移动到一个没有子链接的链接不会触发slideUpPanel()b/c无链接的链接没有类.dropdown。

我试过几件事情无济于事。我希望把这个代码放在最后 - 在mainMenu();之前。电话 - 将工作

$(".main-menu .widescreen .nav-item > a").not(".dropdown").mouseenter(function() { 
    slideUpPanel(); 
    }); 

但它什么也没做。

这里是mainMenu();功能。从。点击到.mouseenter的变化是在第五行..

mainMenu = function() { 
    var dropdown_panel, main_header, main_menu_dropdown_timer, slideUpPanel, startTimer, stopResetTimer; 
    dropdown_panel = $(".main-menu-dropdown-panel .row"); 
    main_header = $(".template-index .main-header"); 
    HEADER.find(".main-menu .widescreen .dropdown > a").mouseenter(function() { 
    var autoHeight, curHeight, dropdown, sub_nav; 
    dropdown = $(this).parent(); 
    sub_nav = dropdown.find(".sub-nav .columns"); 
    if (PAGE.hasClass('template-index') && PAGE.hasClass('transparent-menu') && Modernizr.touch) { 
     if ($('.main-header').hasClass('dropdown-open')) { 
     if (dropdown.hasClass("active")) { 
      startTimer(); 
     } 
     } else { 
     $('.main-header .bg').fadeIn(); 
     } 
    } 
    if (dropdown.hasClass("active")) { 
     slideUpPanel(); 
    } else if ($('.main-header').hasClass('dropdown-open')) { 
     dropdown_panel.find(".columns").animate({ 
     opacity: 0 
     }, 200); 
     dropdown_panel.find('.columns').remove(); 
     HEADER.find(".main-menu .dropdown").removeClass('active'); 
     dropdown.addClass("active"); 
     sub_nav.clone().appendTo(".main-menu-dropdown-panel .row"); 
     dropdown_panel.find(".columns").delay(200).animate({ 
     opacity: 1 
     }, 200); 
     curHeight = dropdown_panel.height(); 
     autoHeight = dropdown_panel.css('height', 'auto').outerHeight(); 
     dropdown_panel.height(curHeight).animate({ 
     height: autoHeight 
     }, 400); 
    } else { 
     dropdown_panel.find('.columns').remove(); 
     $('.main-header').addClass('dropdown-open'); 
     dropdown.addClass("active"); 
     sub_nav.clone().appendTo(".main-menu-dropdown-panel .row"); 
     dropdown_panel.slideDown(400, function() { 
     return dropdown_panel.css("height", dropdown_panel.outerHeight()); 
     }); 
     dropdown_panel.find(".columns").delay(200).animate({ 
     opacity: 1 
     }, 200); 
    } 
    return false; 
    }); 
    slideUpPanel = function() { 
    $('.main-header').removeClass('dropdown-open'); 
    dropdown_panel.find(".columns").animate({ 
     opacity: 0 
    }, 200); 
    return dropdown_panel.delay(200).slideUp(function() { 
     HEADER.find(".main-menu .dropdown").removeClass('active'); 
     dropdown_panel.find('.columns').remove(); 
     return dropdown_panel.css('height', 'auto'); 
    }); 
    }; 
    main_menu_dropdown_timer = ''; 
    if (Modernizr.touch === false) { 
    $('.main-header').mouseenter(function() { 
     if (PAGE.hasClass('template-index') && PAGE.hasClass('transparent-menu')) { 
     $('.main-header .bg').fadeIn(); 
     } 
     return stopResetTimer(); 
    }).mouseleave(function() { 
     if ($('.main-header').hasClass('dropdown-open')) { 
     return startTimer(); 
     } else { 
     if (PAGE.hasClass('template-index') && main_header.css("position") === "absolute") { 
      return $('.main-header .bg').stop(true, true).fadeOut(); 
     } 
     } 
    }); 
    } 
    startTimer = function() { 
    return main_menu_dropdown_timer = setTimeout((function() { 
     slideUpPanel(); 
     if (PAGE.hasClass('template-index') && PAGE.hasClass('transparent-menu')) { 
     return $('.main-header .bg').delay(300).fadeOut(); 
     } 
    }), 500); 
    }; 
    return stopResetTimer = function() { 
    return clearTimeout(main_menu_dropdown_timer); 
    }; 
}; 
mainMenu(); 

感谢您的任何建议,并帮助我学习!

回答

0

不知道这是否会帮助你...

$(".main-menu .widescreen .dropdown > a").hover(
    function() { 

    // show menu 

    }, function() { 

    // hide menu 
    } 
); 
0

//I think this will help you 
 

 
if(!$(".main-menu .widescreen .nav-item > a") 
 
\t .hasClass(".dropdown")){ 
 
\t $(this).mouseover(function(e) { 
 
    \t slideUpPanel(); 
 
    \t }); 
 
}