it-swarm.com.de

jQuery im Unterstrich-Menü

Ich versuche, einem Element im Hauptmenü eine Klasse hinzuzufügen, aber es passiert nichts. Ich verwende ein Underscores-Starter-Theme, das dieses in der header.php hat:

<?php
    wp_nav_menu( array(
        'theme_location' => 'menu-1',
        'menu_id'        => 'primary-menu',
        'after'          => '<span class="fa fa-times"></span>',
    ) );
?>

Ich habe dies dann in die Datei navigation.js gestellt (auch in der footer.php probiert):

$(".menu-item-has-children .span").click(function() {
    $(".menu-item-has-children .sub-menu").removeClass("toggled");
    $(this).next(".sub-menu").toggleClass("toggled");
});

Aber nichts passiert. Ich habe auch ein einfaches ausprobiert:

$('body').click(function() {
    alert("Yeah!");
});

Und da passiert auch nichts. Das macht funktioniert:

window.onload = function() {
    alert("Yeah!");
}

jQuery wird geladen:

<script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>

die Datei navigation.js befindet sich in der Datei functions.php:

function themename_scripts() {

wp_enqueue_style( 'themename-style', get_stylesheet_uri() );

wp_enqueue_script( 'themename-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );

wp_enqueue_script( 'themename-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );

if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
    wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'themename_scripts' );

... also welchen grundfehler habe ich gemacht?

2
user2265915

Sie haben jquery nicht als Abhängigkeit für Ihr Skript übergeben, und Sie verwenden auch das Dollarzeichen, das in WordPress aufgrund von Konflikten nicht direkt unterstützt wird.

Übergeben Sie zunächst jQuery als Anforderung, während Sie Ihren navigation.js eingeben:

wp_enqueue_script( 
    'themename-navigation', 
    get_template_directory_uri() . '/js/navigation.js', 
    array('jquery'), 
    '20151215', 
    true 
);

Wickeln Sie dann Ihren Code in eine selbstaufrufende Funktion ein:

(function($){
    // You have access to $ here
})(jQuery);

Oder noch besser, definieren Sie den $:

var $ = jQuery.noConflict();

$('body').click(function() {
    alert("Yeah!");
});

Erledigt.

2
Jack Johansson