jQuery deaktivieren hover-mit klicken Sie auf
Ich habe einen jQuery-code, der so funktioniert, wie ich erwarte, dass er zu einem bestimmten Punkt.
Hier ist die Geige
Drei Menüpunkte, wenn Sie mit der Maus auf, ein Schwarzes Quadrat und zusätzliche info erscheint in der gelben box.
Beim anklicken Menü 1 & 3, ist ein grüner Kreis angezeigt, bevor das Menü.
Beim anklicken im Menü 2, eine Suchleiste erscheint auch und wird im Fokus mit ein wenig Verzögerung.
Bis zu diesem Punkt ist alles in Ordnung.
Was ich will, ist, zum Beispiel:
-wenn 'menu_item'_2 geklickt und ich Weg bewegen Sie die Maus über einem anderen Element, in das gelbe Feld "info_2" muss gezeigt werden.
Also sollte ich irgendwie fallen die hover-nach einem Klick gemacht hat.
Und wenn ich auf einem anderen menu_item es sollte zeigen, die entsprechende info in der gelben box.
Ich bin kein Experte in jQuery, also vielleicht der code muss getan werden, auf eine andere Weise.
Trotzdem, vielen Dank für deine Hilfe!
$(function() {
$("#search").hover(
function() {
$("#search_info").show();
$("#arrow").show().css('top', 230);
$("#fade_search").animate({ opacity: 0.4},50);
},
function() {
$("#arrow, #search_info").hide();
$("#fade_search").animate({ opacity: 1},50);
}).click(function(e) {
$("#activated").show().css('top', 232);
var focusDelay = $("input[type=text]").fadeIn(100);
setTimeout(function(){
$(focusDelay).focus();
},1000);
e.preventDefault();
});
$("#list").hover(
function() {
$("#list_info").show();
$("#arrow").show().css('top', 205);
$("#fade_list").animate({ opacity: 0.4},50);
},
function() {
$("#arrow, #list_info").hide();
$("#fade_list").animate({ opacity: 1},50);
}).click(function(e) { show up
$("#activated").show().css('top', 209 );
e.preventDefault();
});
$("#program").hover(
function() {
$("#program_info").show();
$("#arrow").show().css('top', 255);
$("#fade_program").animate({ opacity: 0.4},50);
},
function() {
$("#arrow, #program_info").hide();
$("#fade_program").animate({ opacity: 1},50);
}).click(function(e) {
$("#activated").show().css('top', 261 );
e.preventDefault();
});
});
- Nur um einige Klarstellungen: der text soll nicht angezeigt werden auf hover nachdem Sie geklickt haben, ein Menü zu einmal, sondern es sollte dann aktiviert werden, die nur auf Klicks im Menü?
- ja, das ist wahr. nach Klick es sollte zeigen, den text des entsprechenden Menüpunktes.
- Ich arbeite an einer sauberen Lösung mit klaren Beispielen, nur halt ein bisschen mehr. 🙂
- vielen Dank, ich freue mich es zu sehen! 🙂
Du musst angemeldet sein, um einen Kommentar abzugeben.
Habe ich geändert, Ihre gesamte jQuery-code. Siehe dieses jsFiddle für die Nacharbeit: http://jsfiddle.net/jUHNF/8/
Hinweis: ich nahm an, Sie wollte nur zeigen das Suchfeld für Menüpunkt 2, wenn das nicht der Fall, entfernen Sie einfach die folgende:
Den code selbst sollte werden ziemlich gut kommentiert (vielleicht ein bisschen zu gut).
Wie Sie sehen können habe ich verschoben, alle Funktionen in EINEM hover/click-Ereignis, anstatt Sie in separaten Veranstaltungen je nachdem, welchen Menüpunkt man angeklickt hat. Die Idee hier ist, um zu halten es sauber und einfach.
Was ist, wenn Sie wollen, um weitere änderungen vorzunehmen, um Ihre Klicks im Menü (zum Beispiel machen das aktuell angeklickte Element Kursiv)? Dann würden Sie brauchen, um die änderung in drei stellen, einmal für jede Menü-Ereignis. Wenn Sie fügen Sie ein neues Menü-Element, das Sie brauchen würde, um den code duplizieren einmal mehr als gut... und so weiter. Indem Sie sicher, dass die meisten Ihrer Logik gehen können, unter den gleichen Fall, Sie nicht haben, um doppelten code wie diesen (Don ' T Repeat Yourself!)
Edit: Einfügen jsFiddle code für zukünftige Referenz.
JS:
versuchen Sie dies:
JSFIDDLE
Etwas wie http://jsfiddle.net/workdreamer/TqxyY/