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?