Question

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):
http://goo.gl/TzPPd

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?

Answer 1

Ahhh, spoke too soon. Solved with this:

$(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();
  });
});