如何爲2個響應菜單

Question

組合代碼，我想提出2個響應菜單中的一個頁面，都完全一樣，一個在頂部，一個在底部， 的HTML如下： -

<a href="#" id="pull">Menu</a> 

和jQuery是： -

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" 
    type="text/javascript"></script> 

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

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

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

如果我在jQuery腳本創建2個類的ID爲拉頂部與#pull如上

和id bottompull與#bot底部tompull在另一個jQuery腳本

a）這會引起衝突嗎？

b）是否有一種組合腳本的方法？

我試圖再添變數的#bottompull這裏，

 <http://jsfiddle.net/rz85X/9/> 

但這不起作用

可有人請點我在正確的方向，請

Answer 1

您的代碼重新定義pull變量，您第二次將其設置在小提琴中。你需要做的是讓代碼爲菜單的每個實例運行，而不是同時運行兩個菜單。我已經更新了你的提琴使用$。每到兩個菜單單獨運行：http://jsfiddle.net/jakelauer/rz85X/13/

下面的代碼：

$(function() { 
    var pull = $('#pull, #bottompull'); 

    pull.each(function(){ 
     $(this).on('click', function(e) { 
      menu  = $(this).closest('nav').find('ul'); 
      menuHeight = menu.height(); 
      e.preventDefault(); 
      menu.slideToggle(); 
     }); 
    }); 

    $(window).resize(function(){ 
     var w = $(window).width(); 
     $('nav ul').each(function(){ 
      if(w > 320 && $(this).is(':hidden')) { 
       $(this).removeAttr('style'); 
      } 
     }); 

    }); 
}); 

編輯：更新，刪除了幾個錯誤