jQuery function in WordPress will nicht

Quests Sohn

Mitglied
Hallo Forum,

ich möchte innerhalb einer WP-Website eine eigene jQuery function einsetzen,
die ein responsives Menü mit Slider öffnen bzw. schließt. Klingt wahrscheinlich simpel.

Dazu habe ich zuerst jQuery über die functions.php eingebunden, zumindest wird
HTML:
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
im Sourcecode gezeigt.

Zusätzlich wird eine selbst erstellte Datei scripts.js auf die gleiche Weise eingebunden.
Auch sie wird korrekt im Sourcecode dargestellt.

Diese Datei enthält nun exakt folgenden Inhalt:

Javascript:
jQuery(document).ready(function() {
    jQuery('.menu-trigger').click(function(e) {
        jQuery('#site-navigation').slideToggle(500);
 
        e.preventDefault();
    });
    
});

Kein weiteres Zeichen steht in der Datei.

Leider führt der Klick auf das Div .menu-trigger zu absolut keiner Reaktion.

Falls es hilft, zeige ich gerne auch noch den HTML Code der entsprechenden Sektion:
HTML:
<div id="menu-trigger"><span>&#9776;</span></div>
                
<nav id="site-navigation" class="menu-1">
<div class="menu-kopf-container">
<ul id="site-menu" class="menu">
<li id="menu-item-46" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46"><a href="/login/">Login</a></li>
<li id="menu-item-49" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-49"><a href="/home/">Start</a></li>
<li id="menu-item-50" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-50"><a href="/about/">Hallo</a></li>
<li id="menu-item-47" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-47"><a href="/blog/">Blog</a></li>
<li id="menu-item-48" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-48"><a href="/kontakt/">Kontakt</a></li>
</ul>
</div>
</nav>

Was mache ich falsch? Ich verstehe es nicht ...
 

Yaslaw

n/a
Moderator
Die JQuery-Adresse dürfte falsch sein.
Nach dem Punkt kommt eine CLass, nicht eine ID.
Für die ID braucht man ein #
Javascript:
jQuery('#menu-trigger').click(function(e) {
 

Quests Sohn

Mitglied
Hallo Yaslaw,

da hast Du vollkommen Recht, aber trotz Korrektur dieses Fehlers will es nicht funktionieren.

Es scheint so, als sei die function falsch, obwohl das eigentlich nicht sein kann.
Oder muss ich durch add_action() oder ähnliches erstmal dafür sorgen, dass die function überhaupt anläuft?
 

Quests Sohn

Mitglied
Okay, vielen Dank. Da steht:

Code:
Das Skript von "https://www.xxx.xx/scripts.js" wurde geladen, obwohl sein MIME-Typ ("text/html") kein für JavaScript gültiger MIME-Typ ist.
2 test
Laden fehlgeschlagen für das <script> mit der Quelle "https://www.xxx.xx/scripts.js". test:141:1
 

Sempervivum

Erfahrenes Mitglied
OK, Problem beim Laden deines Skripts. Genau weiß ich es nicht, aber der MIME-Typ wird wohl vom Webserver gesetzt. Da muss dir jemand mit weitergehenden Kenntnissen weiter helfen.