jQuery在Wordpress上切换菜单不起作用

Question

I'm working on a Wordpress site that has a sub-menu I need to open when a certain 'li' is clicked and close when it's clicked again. I've tried several jQuery functions and nothing is working.

I've also included the wp_enqueue_script function in the functions.php file, and I know the script referenced is working because I added a simple alert function to my created jQuery file and it works.

Here is the HTML of the menu:

<nav id="access" class="clearfix">
    <div class="container clearfix">
      <ul class="root">

         <li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-19">
         <a href="example.com/">my name</a></li>

         <li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-17">
         <a href="example.com/?page_id=10">film</a>
             <ul class="sub-menu">
                  <li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43">
                  <a href="example.com/?page_id=42">calvin klein film</a></li>
                  <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22">
                  <a href="example.com/?page_id=20">cam’ron</a></li>
               .
               .
               .
             </ul>

           </li>
      </ul>
    </div><!-- .container -->
</nav>

So when menu-item-17 is clicked, I need the sub-menu class to appear and then disappear on another click.

I've tried functions like this with no luck:

jQuery("#menu-item-17").click(function () {
$(".sub-menu").toggle("slow");
});

And in case it helps, here's what I added in the functions.php file:

function attitude_child_scripts() {
wp_enqueue_script('toggle js', get_stylesheet_directory_uri() . '/js/toggle.js');
}
add_action('wp_enqueue_scripts', 'attitude_child_scripts');

What am I doing wrong?? Is it something Wordpress specific? Thanks in advance!

Answer 1

The problem I found in your javscript is that you are trying to toggle the visibity of the submenu class but the #menu-item-17 li contains a link. The link will navigate to url contained within its href attribute by default. To prevent the link from executing its default behavior you would have to change your javascript to the code below: jsfiddle example --> http://jsfiddle.net/larryjoelane/206duwnt/

Javascript code:

 /* 
jQuery document ready function call below is used passing $ as a parameter in order to avoid any conflicts with other Jquery Libraries loaded that might use the $ in its library
*/


jQuery(document).ready(function($){//begin document ready wrapper function to allow the use of the $

 //hide .sub-menu element on page load
 $(".sub-menu").hide();

/*
Adding e as a function parameter, e is as a variable that holds the event object. Child selector plus a added so that the preventDefault
only affects links that are a direct child of #menu-item-17.
*/
    $("#menu-item-17 > a").click(function(e){//begin click event

    /* 
    The code was added below because if you click on the #menu-item-17
    li element it contains a link which will navigate by default.
    */
    e.preventDefault();


$(".sub-menu").toggle("slow");

});//end click event

});//end document ready wrapper function

If you want to keep the link in the #menu-item-17 li element, You could place another element beside it in the li so that the user could click on the new element to toggle visibility. This could be some plain text or an image. You could also move the link to another li element all together. If you make any of these changes then you would want to remove the e.preventDefault() function call so that your link in the #menu-item-17 li element will navigate to another page again.