为什么我的jQuery preventDefault（）工作不正常？

Question

I'm developing a Wordpress theme which uses a self-built jQuery accordion for navigation:

// jQuery Footer Navigation Slide
jQuery('#footer-accordion > li > a').on('click', function(e){
    if(jQuery(this).parent().has('ul')) {
        e.preventDefault();
        if(!jQuery(this).hasClass('open')) {
            jQuery('#footer-accordion li ul').slideUp(350);
            jQuery('ul li a').removeClass('open');
            jQuery(this).next('ul').slideDown(350);
            jQuery(this).addClass('open');
        } else if(jQuery(this).hasClass('open')) {
            jQuery(this).removeClass('open');
            jQuery(this).next('ul').slideUp(350);
        }
    }
});

This worked just fine when i built it in bare HTML, I'm now however having trouble integrating it into my Wordpress theme. It seems the e.preventDefault() I've got in there is also preventing the default (follow the link) on menu items (ul li a) that do NOT have a ul inside. I figured my selectors were fine, since it worked in my HTML.

So in short: I expect to be directed to a page if I click a ul li a where the li has no nested ul. However, nothing happens when I do so. The .slideUp() function works just fine, and I can click the links that are in the nested ul. Are my selectors wrong? Am I giving the wp_nav_menu() function the wrong variables?

This is the relevant part from footer.php:

    <?php wp_nav_menu( array(
        'container_class'   => 'footer-navigation clearfix',
        'menu_id'           => 'footer-accordion' 
)); ?>

And this is what Wordpress makes of that: http://jsfiddle.net/vKmfu/

Answer 1

The jQuery(this).parent().has('ul') part is the culprit. This invocation always returns a jQuery object, like most of the jQuery functions. When a JavaScript object is used in a booelan context, it is evaluated as true unless it is null. What you need is if(jQuery(this).parent().has('ul').length > 0) { ... }

By the way, the selector '#footer-accordion > li > a' won't affect the second or more level of links. The > is a children selector. You probably need a descendant selector.