web-dev-qa-db-fra.com

menu jQuery on Underscores

J'essaie d'ajouter une classe à un élément du menu principal, mais rien ne se passe. J'utilise le thème de démarrage Underscores, qui a ceci dans le header.php:

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

J'ai ensuite mis cela dans le fichier navigation.js (également essayé en ligne dans le footer.php):

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

Mais rien ne se passe. J'ai aussi essayé un simple:

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

Et rien ne s'y passe non plus. Ceci fonctionne fonctionne:

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

jQuery est en cours de chargement:

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

navigation.js est mis en file d'attente dans 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' );

... Alors quelle erreur fondamentale ai-je faite?

jquerywp-enqueue-script
2
user2265915

Vous n'avez pas passé jquery en tant que dépendance de votre script, et vous utilisez également le signe dollar, qui n'est pas directement pris en charge dans WordPress en raison de conflits.

Commencez par passer jQuery comme exigence lors de la mise en file d'attente de votre navigation.js:

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

Ensuite, encapsulez votre code dans une fonction d’appel automatique:

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

Ou mieux encore, définissez le $:

var $ = jQuery.noConflict();

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

Terminé.

2
Jack Johansson