jQuery Dropdown Effects only on Mobile?

JavaScript
1

Currently, I have my mobile navigation set up to create a dropdown function. You can see a working example here (just pull you browser small to see the mobile nav):

The problem is that the jQuery drop down effects are also being applied to the non-mobile navigation, which is causing some issues. I want the jQuery effects to only work on the mobile navigation, here is the code I’m currently using:

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

I tried this, but had no luck:

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

Anyone know how to make the jQuery effects only apply to the mobile navigation?

2

From what I can see on your sample link this is working as intended? Did you end up fixing it or am I missing something?