多个下拉菜单

Question

I am looking to add two different "navigation" sections to a page on mobile. Here is the jQuery pull to make the dropdown work. However, when I add in a second section of markup for the second dropdown, the one menu button opens BOTH menus. Is it possible to use more than one? Or what am I missing to make it open each one separately?

<script>
jQuery(function() {  
var pull        = jQuery('#pull');  
    menu        = jQuery('nav ul');  
    menuHeight  = menu.height();  

jQuery(pull).on('click', function(e) {  
    e.preventDefault();  
    menu.slideToggle();  
  });  
}); 

jQuery(window).resize(function(){  
var w = jQuery(window).width();  
if(w > 320 && menu.is(':hidden')) {  
    menu.removeAttr('style');  
}  
}); 
</script>

Answer 1

You need to change the menu and pull variable values.

Also, add a var before the variables as so, so the variables don't become global:

var pull        = jQuery('#pull');  
var menu        = jQuery('nav ul');  
var menuHeight  = menu.height();