jQuery zu schließen Untermenü von Mouseenter

Question

Ich versuche, ziemlich komplex jQuery Menü zu mod.

Ursprünglich wurde es auf .click geöffnet, aber ich möchte, dass es bei Hover (.mouseenter) geöffnet wird.

Ich habe diese Änderung vorgenommen und Sie können es im Hauptmenü here sehen.

Das Problem ist, dass jede offene Sub geöffnet bleibt, wenn ich einen Hauptlink ohne Sub-Mouse eingeben.

Wie Sie sehen können, gibt es eine slideUpPanel() -Funktion. Es funktioniert mit .click, aber mit .mouseenter, das Verschieben zu einem Link ohne Sub-Link feuert nicht slideUpPanel() b/c der Link ohne Sub-Link hat nicht die Klasse .dropdown.

Ich habe ein paar Dinge vergeblich versucht.

Ich hatte gehofft, diesen Code am Ende zu platzieren - vor dem mainMenu(); Anruf - würde funktionieren

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

Aber es tut nichts.

Hier ist das mainMenu(); Funktion. Der Wechsel von .click zu .mouseenter ist in der fünften Zeile ..

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(); 

Vielen Dank für alle Vorschläge und mir geholfen lernen!

Answer 1

nicht sicher, ob dies wird Ihnen helfen, ...

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

    // show menu 

    }, function() { 

    // hide menu 
    } 
); 

Answer 2

//I think this will help you 
 

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