Question

I’m creating a mobile navigation for my website using jQuery to hide/reveal child links. Here is a working example of the navigation:
http://codepen.io/johnmotyljr/pen/HGADn

However, when I place the javascript into the HEAD of my WordPress theme, it doesn’t seem to work. Here is the code I’m using in my theme:

<script type="text/javascript">
$(function() {
  $('ul.menu > li > a').click(function(e) {
    $('ul.sub-menu').slideUp('normal');
      if($(this).next('ul.sub-menu').is(':hidden') === true) {    
        $(this).next('ul.sub-menu').slideDown('normal');
      }
    e.preventDefault();
  });
}); 
</script>

I rarely use Javascript/jQuery so I’m sure it’s probably something small holding me up. Anyone want to point me in the right direction?

Answer 1

function my_scripts_method() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js');
    wp_enqueue_script( 'jquery' );
}    

add_action('wp_enqueue_scripts', 'my_scripts_method');
?>

This is what solved it for me. Thanks for the help from barakadam and loQ. I had to use the Google CDN to over-ride the default WP jQuery.