jQuery切换无法在手机上工作

Question

so i am trying to make it so when you click menu on the mobile responsive version of this site right here http://dev.trafficdigitalagency.com/stage/ it toggles what is display:none; in the class "sub-menu"

here is the javascript/jquery I use (which can be found at http://dev.trafficdigitalagency.com/stage/js.js )

$(document).ready(function(){
  $("#menu-item-3121").click(function() {
    $(".sub-menu").fadeToggle("slow");
  });
});

why when i click on menu in the responsive version does the sub menu not toggle?

Answer 1

I had the same issue the other day. Turns out the click event callback was being set up to fire twice, so the toggle looked like it wasn't firing at all. Ended up having to ensure any existing listeners are removed before adding one back. Note the off() call. Hope this works for you:

$(document).ready(function(){
    $("#menu-item-3121").off("click").on("click", function() {
        $(".sub-menu").fadeToggle("slow");
    });
})

Answer 2

If you take a look at the console, (Ctrl-Shift-J in Chrome) where all JS erros all logged, you will see that the real problem relies on the way WordPress is loading the jQuery library in 'no conflict' mode.

I believe the solution provided here by @RedEyedMonster will help you, so write your function as this:

jQuery(document).ready(function ($) {
    $("#menu-item-3121").click(function() {
        $(this).find(".sub-menu").fadeToggle("slow");
    });
});