Menü schließen, wenn ein anderes Element schwebt

Question

Ich erstelle ein Menü mit zwei Dropdown-Menüs. Ich brauche die Dropdown-Menüs, die geöffnet werden, wenn der Menüeintrag sich über dem Menü befindet, aber wenn das andere Menüelement sich über dem Menü befindet, wird es geschlossen.

Das Problem, das ich habe, ist das erste Dropdown zu schließen, wenn ich über den zweiten Menüpunkt schweben.

Sehen Sie bitte meine Geige hier: http://www.bootply.com/uEKWCdNj4C

Ich habe durch andere Fragen sieht, und dieser scheint möglicherweise von Nutzen zu sein, aber ich habe Probleme, es zu meiner Situation anwenden: Vertical Menu to stay open on hover then close when another is hovered

Also ich entschuldige mich, wenn dies ein Duplikat ist ... jede Hilfe wäre willkommen. Vielen Dank!

Answer 1

Sie können slideup auf dem offenen ul aufrufen, bevor Sie slidedown auf dem aktuellen anrufen. wie unten

$(document).ready(function() { 

    $(".nav-basic").hover(function() { 
     $('ul.menu-applied').slideUp('medium'); 
     $('ul.menu-basic').slideDown('medium'); 
    }); 
    $('ul.menu-basic').bind('mouseleave', function(){ 
    $('ul.menu-basic').slideUp('medium'); 
    }); 

    $(".nav-applied").hover(function() { 
     $('ul.menu-basic').slideUp('medium');  
     $('ul.menu-applied').slideDown('medium'); 
    }); 
    $('ul.menu-applied').bind('mouseleave', function(){ 
    $('ul.menu-applied').slideUp('medium'); 
    }); 


}); 

Answer 2

So ein class="isHovered" auf das Element gesetzt, das schwebte wird. Stellen Sie die Boxen class="isHovered" aswell ..

Wenn hover erneut aufgerufen wird, oder lässt mouseenter sagen, überprüfen Sie, ob isHovered auf dem aktuellen Feld und auf der anderen Box ist für ... oder irgendwelche Kisten iterieren dort werden könnten. ..

Sie könnten auch die aktuell gehaltene Element-ID in einer Variablen und der Box-ID speichern. Dann benutze diese Werte. Wie JS nicht multithreaded können Sie auf der Reihenfolge der Ausführung verlassen ...

Answer 3

Sie haben soeben Ihr Skript benötigt aktualisieren, um die slideUp Funktion aufzurufen:

$(".nav-basic").hover(function() { 
     $('ul.menu-basic').slideDown('medium'); 
    $('ul.menu-applied').slideUp('medium'); 
    }); 


    $(".nav-applied").hover(function() {  
     $('ul.menu-basic').slideUp('medium'); 
     $('ul.menu-applied').slideDown('medium'); 
    }); 

Answer 4

Ihr Code einige Optimierungen nutzen könnten, aber man konnte im Grunde rufen slideUp() auf allen anderen $(.menu-interior') Elemente, die nicht von der Zielklasse sind:

Beispiel: $('.menu-interior:not(.menu-basic)').slideUp();

gegabelt Geige Siehe hier: http://www.bootply.com/DZxktgUtjh

Hinweis: Dadurch wird JEDES andere offene Menü geschlossen, anstatt alle anderen Klassen fest codieren zu müssen, wenn das Menü erweitert wird.

Answer 5

$(document).ready(function() { 

    $(".nav-basic").hover(function() { 
     $('ul.menu-basic').slideToggle('medium'); 
    }); 

    $(".nav-applied").hover(function() { 
     $('ul.menu-applied').slideToggle('medium'); 
    }); 

});