无法让 jquery 功能在 wordpress 网站上工作

Question

My jquery function works fine on local, but once I add it to my WP footer and upload, nothing.

There are a lot of scripts on this page, the but the script I'm trying to make work is this:

    jQuery(document).ready(function($){
  $("li.accordion").on('click',function() {
    $('.mega-sub-menu', this).slideToggle("fast", function() {});
  });
});

Jquery is loaded and working, but this script won't function.

Any ideas?

EDIT: Thanks, but it wasn't the stray '

I seemed to be having a cache issue on the site, which has been updated now. Still having the problem.

EDIT2: Removed a link

Answer 1

Your site has a syntax error on it. There is a quote at the end of your JavaScript which may well be causing it to not execute.

jQuery(document).ready(function(){
    jquery("li.accordion").click(function() {
        jquery('.mega-sub-menu', this).slideToggle("fast", function() {});
    });
});' <--- quote here

Ok, you've fixed that now, and all the JavaScript is working, but I can see the next issue that prevents the menu from showing is a CSS rule with !important. (It's overriding the style="display:block" attribute on the mega-sub-menu that is added via JQuery).

Answer 2

So after doing a little more googling, I came up with this answer:

jQuery(function($){
    $('li.accordion').click(function() {
             $('.mega-sub-menu', this).slideToggle('fast', function() {});
    }).click();

});

Here we simulate the click so that the accordion starts out closed and I don't need to add any more CSS to anything.

I added important to the CSS earlier to overcome the inline style — like an idiot, not realizing that the jquery was adding the inline style (I think that's what I did anyway, it was inappropriately late.)