Hi,
mein Menü hat je nach Breakpoint unterschiedliche Verknüpfungen. Ab 980px wird man zum Anchor name #programm weitergeleitet, wenn man auf "Programm" klickt und unter 980px ist die Verknüpfung "#", damit sich das Submenü öffnet, dass es auch nur in der unter 980px Version gibt. Bennene ich mit jQuery je nach Maße unterschiedliche Verknüpfungen klappt das nur theorietisch. Gebe ich dem "Programm" bereits in der html die Verknüpfung #programm, klappt es auf der >980 Version wunderbar, doch auf der darunter übernehmen die Submenüpunkte die "#" Verknüpfung und man geklangt nicht zu den verknüpften Unterpunkten. Drehe ich das Ganze um und gebe in der html die "#" Verknüpfung und sage, dass wenn die Weite höher als 980 ist, soll die Verknüpfung zu "#programm" geändert werden, bekomme ich beim Klick zwar in der url ein #programm hinzugefügt, aber es entsteht keine Weiterleitung, nur die url-Erweiterung.
Dann habe ich versucht mit der ursprünglichen Version (im html #programm und <980 Verknüpfung zu "#") den Unterpunkten eigene Funktionen zu geben, da sie ursprünglich die Verknüpfung des Elternelementes übernehmen. Wie bei der umgedrehten Version erweitert sich die url, aber eine Weiterleitung kommt nicht zustande.
Die Chrome Console spuckt mir bei diesem Vorgang folgende Fehlermeldung aus, mit der ich bisher nicht viel anfangen konnte:
**jquery.js:1468 Uncaught Error: Syntax error, unrecognized expression: [name=]
Sizzle.error @ jquery.js:1468
Sizzle.tokenize @ jquery.js:2125
Sizzle.select @ jquery.js:2546
Sizzle @ jquery.js:869
find @ jquery.js:2792
jQuery.fn.init @ jquery.js:2909
jQuery @ jquery.js:75
(anonymous function) @ smooth-jump.js:5
dispatch @ jquery.js:4737
elemData.handle @ jquery.js:4549**
Nun zum Code. Wer sich fragt, warum ich .hover, statt .click, benutzt habe. Mit .click hat es nicht funktioniert. Der Klick wurde vor der Prämisse ausgeführt.
html
<li class="programm"><a class="prlink" href="#programm">Programm</a>
<ul class="sub">
<li><a id="fri" href="#freitag">FREITAG</a></li>
<li><a id="sam" href="#samstag">SAMSTAG</a></li>
<li><a id="son" href="#sonntag">SONNTAG</a></li>
</ul>
</li>
jQuery
$('.programm').hover(function() {
if ($(window).width() < 980) {
$(".programm a").attr("href", '#');
} else {
$(".programm a").attr("href", '#programm');
}
});
$('.programm').hover(function() {
if ($(window).width() < 980) {
$("#fri").attr("href", '#freitag');
} else {
$("#fri").attr("href", '#freitag');
}
});
$('.programm').hover(function() {
if ($(window).width() < 980) {
$("#sam").attr("href", '#samstag');
} else {
$("#sam").attr("href", '#samstag');
}
});
kein Platz, selbes für S