In manchen Mega-Menüs ist es auf dem Tablet nicht möglich Submenüs anzusehen, da es keinen HOVER-Effekt gibt. Abhilfe schafft da nur wenn man auf den CLICK-Event setzt um das Submenü so lange offen zu halten bis der User auf eine andere Stelle klickt.
Hier ein kleines, schnell geschriebenes Skript was diese Funktion erfüllt...
jQuery(function($) {
// console.log('PING');
$(function() {
$("#main-menu li").on("click", function(e) {
$(this).addClass('current');
$('ul li.current .popup').addClass('open');
e.stopPropagation()
});
$(document).on("click", function(e) {
if ($(e.target).is("li.current .popup") === false) {
$("li.current .popup").removeClass("open");
}
});
});
});
Im ersten Teil des Skriptes wird eine Event-Listener auf das LI-Element im Hauptmenü "#main-menu" gelegt. Bei jedem Klick wird die Klasse "current" hinzugefügt und dem darunter liegenden DIV "popup", welches das Submenü umschließt, die Klasse "open".
Im zweiten Teil, muss das "open" wieder entfernt werden. Dazu haben wir den Listener so angelegt, das er bei jedem Klick irgendwo im Dokument prüft ob der Klick noch im Submenü "popup" ist. Wenn nicht, dann wird die Klasse "open" entfernt.
