WordPress.org

1. JeremyEnglert
   Member
   Posted 6 months ago #
   

   I recently created a mobile navigation using jQuery as part of the drop-down function, you can see the code here:
   http://jsfiddle.net/senff/9cK3X/3/

   However, when I tried to add it to my WordPress site, I had no luck. Here is the code I added to my HEAD:

   jQuery('ul.menu > li > a').click(function(e) {
   
         jQuery('ul.sub-menu').slideUp('normal');
   
         if(jQuery(this).next('ul.sub-menu').is(':hidden') == true) {
             jQuery(this).next('ul.sub-menu').slideDown('normal');
             } 
   
         e.preventDefault();

   However, it does not seem to be working. Here is the website it's being used on (pull your browser small to see the mobile nav):
   http://www.mcfaddengavender.net/newmg/

   Any idea what I'm doing wrong?

   Thanks guys!

2. Andrew Nevins
   Volunteer Moderator
   Posted 6 months ago #
   

   You're not closing your function.

3. JeremyEnglert
   Member
   Posted 6 months ago #
   

   I'm now using this, still no luck:

   jQuery('ul.menu > li > a').click(function(e) {
   
         jQuery('ul.sub-menu').slideUp('normal');
   
         if(jQuery(this).next('ul.sub-menu').is(':hidden') === true) {
             jQuery(this).next('ul.sub-menu').slideDown('normal');
             } 
   
         e.preventDefault();
    });

4. Andrew Bartel
   Member
   Posted 6 months ago #
   

   First off, use: on('click',function(e)...

   Have you confirmed that the basic functionality works by putting an alert in or anything?

5. JeremyEnglert
   Member
   Posted 6 months ago #
   

   @Andrew Bartel,

   After trying to run a basic alert, I realized jQuery isn't functioning at all. This was also confirmed when I added this into my HEAD and everything began to work correctly:

   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

   However, I understand that is not the "correct" way to call jQuery, which is why I was using this:

   <?php wp_enqueue_script("jquery"); ?>

   However, the Enqueue function doesn't seem to be working for me. Is there something I need to place into the Functions.php to get the Enqueue function working? From my understanding, it was as simple as adding <?php wp_enqueue_script("jquery"); ?> to your HEAD.

6. Andrew Bartel
   Member
   Posted 6 months ago #
   

   I don't pretend to know exactly the order of firing of hooks/filters/etc for WordPress, so, until my knowledge is where it needs to be I have had success creating separate js files and then running the wp_enqueue script in my functions.php.

   Example .js file:
   

   jQuery(document).ready(function()
   {
   // add jquery stuff here
   });

7. Amy Hendrix (sabreuse)
   Moderator
   Posted 6 months ago #
   

   Scripts should be enqueued in your functions.php or the main plugin file if you're using a plugin:

   <?php
   function my_scripts_method() {
       wp_enqueue_script('jquery');
   }    
   
   add_action('wp_enqueue_scripts', 'my_scripts_method');
   ?>

   WordPress then automatically adds the script to your header. You shouldn't be adding your script calls directly to header.php -- first, because you need the add_action() part, and second, because that would kill one of the big benefits of enqueuing, which is to avoid conflicts with other scripts that may be added elsewhere.

8. Andrew Bartel
   Member
   Posted 6 months ago #
   

   There you go, thanks Amy, learn something new everyday.

Reply

You must log in to post.