Hallo, ich hab bei meinem CSS-DropDown Menü über einen if-Block festgelegt, daß wenn es sich um ein Touch-Device handelt oder eine bestimmte Fenstergröße (Breite 900px) unterschritten wird , dem Menü Click-Event-Handler zum togglen von CSS-Klassen hinzugefügt werden.
Die aktuelle Fenstergröße wird dabei durch die Abfrage der CSS-Eigenschaft: 'Display: flex' ermittelt, welche von den Media Queries bei einer Breite < 900px gesetzt wird.
Dies funktioniert gut bei onLoad.
Sobald dies aber über die Resize-Funktion getriggert wird, funktionieren die Click-Events (bei einer Breite < 900 px) unzuverlässig.
Dies kommt wohl dadurch, daß onResize das Dokument mit den togglenden Click-Event-Handlern befeuert wird, die in den ausgeführten Funktionen enthalten sind.
Kann mir vielleicht jemand sagen, wie man diese aus der Resize-Funktion herausnehmen kann ohne die Funktionalität zu zerstören?
jQuery
Die aktuelle Fenstergröße wird dabei durch die Abfrage der CSS-Eigenschaft: 'Display: flex' ermittelt, welche von den Media Queries bei einer Breite < 900px gesetzt wird.
Dies funktioniert gut bei onLoad.
Sobald dies aber über die Resize-Funktion getriggert wird, funktionieren die Click-Events (bei einer Breite < 900 px) unzuverlässig.
Dies kommt wohl dadurch, daß onResize das Dokument mit den togglenden Click-Event-Handlern befeuert wird, die in den ausgeführten Funktionen enthalten sind.
Kann mir vielleicht jemand sagen, wie man diese aus der Resize-Funktion herausnehmen kann ohne die Funktionalität zu zerstören?
jQuery
Code:
// JavaScript Document
$(document).ready(function () { // Anweisungen nach dem Ladeabschluss des DOM ausführen
'use strict';
//################################### MOBILE MENÜ EIN-/AUSBLENDEN ###################################
// Funktion definieren zum Ausblenden der DropDown Menüs
function resetDropDownMenu() {
$('nav ul li ul').removeClass('display-flex'); // DropDown Menüs aller Ebenen ausblenden
$('nav ul li i.exit-block').removeClass('exit-block'); // Exit-Icons aller Ebenen ausblenden
$('nav ul li a').removeClass('touch-background-hl'); // Click Backgrounds aller Ebenen ausblenden
}
$('#mobile_menu_button').click(function () {
$('#navigation').toggleClass('display-flex');
$(resetDropDownMenu); // Alle aktivierten Elemente des DropDown Menüs zurücksetzen
});
//################################# MENÜ- UND QUITICON AUSTAUSCHEN ##################################
var MENU_OPEN = false;
$('.menu_icon').stop().click(function () {
if (MENU_OPEN === false) {
MENU_OPEN = true;
$('.menu_icon').addClass('is-active'); // Animation Menü- zu Quiticon auslösen
} else {
MENU_OPEN = false;
$('.menu_icon').removeClass('is-active'); // Animation Quit- zu Menüicon auslösen
}
});
//############################## DROPDOWN MOBILE MENÜ EIN-/AUSBLENDEN ###############################
function isTouchDevice() { // Abfrage ob es sich um Touch-Device handelt
return typeof window.ontouchstart !== 'undefined';
}
$(window).resize(function () {
function isSmallWindowDevice() { // Abfrage ob es sich um ein Device mit Anzeige des Mobile Menüs handelt
return $('#mobile-menu-header').css('display') === 'flex'; // Abfrage ob Media Query für mobile Geräte aktiv ist
} /*alert(isSmallWindowDevice());*/
if (isTouchDevice() || isSmallWindowDevice()) { // Anfang der Anweisungen für Touch- oder smallWindow-Devices
// Ebene1 + 2
$('nav ul li a').click(function () {
$(this).siblings('ul').toggleClass('display-flex'); // DropDown-Menü(ul), adressiert als Geschwister-Element des geclickten Links, aus- und einklappen
$(this).children('i.exit-none').toggleClass('exit-block'); // Exit-Icon(i), adressiert als Kind-Element des geclickten Links, ein- und ausblenden
});
// Ebene1 + 2
if ($('nav ul').css('display') !== 'flex') { // wenn Ebene ausgeblendet ist
$('nav ul li a').click(function () { // hinzufügen des click events wichtig für (this) Lokalisation
$(this).siblings('ul').find('li ul').removeClass('display-flex'); // Drop-Down Ebene2(ul), adressiert als Geschwister-Element des geclickten Links, ausblenden
$(this).siblings('ul').find('li i.exit-block').removeClass('exit-block'); // Drop-Down Ebene1 Exit-Icon(i) ein- und ausblenden, adressiert als Geschwister-Element des geclickten Ebene1 Links
$(this).siblings('ul').find('li a').removeClass('touch-background-hl touch-background-hl1 touch-background-h2'); // Drop-Down Ebene1 Background-Color zurücksetzen, adressiert über den vom Geschwister-Element des geclickten Ebene1 Links
});
}
//######################## MOBILE MENÜ LINKS BACKGROUND-COLOR TOGGLE ON CLICK #######################
// Alle Ebenen
$('nav ul li a').click(function () {
$(this).toggleClass('touch-background-hl'); // onClick Background-Color für alle Links austauschen
});
//Alle Ebenen
$('nav ul li').removeClass("no-touch"); // Hover Klasse für noTouch-Devices & Desktop Menü deaktivieren
} // Ende der Anweisungen für Touch- oder smallWindow-Devices
//######################### HOVER NUR FÜR NON-TOUCH_DEVICES AKTIVIETREN #########################
//Alle Ebenen
else {
$('nav ul li').addClass("no-touch"); // Hover Klasse für noTouch-Devices & Desktop Menü aktivieren
$(resetDropDownMenu); // Alle durch click aktivierten Elemente des DropDown-Menüs zurücksetzen
} // Ende der Anweisungen für noTouch-Devices und largeWindow-Devices
}).resize();
});
Zuletzt bearbeitet:
)
