jQuery的事件觸發只火一次......我需要他們總是工作

Question

$(document).ready(function(){ 
    $('#nav').mouseup(function(){ 
     $(this).css('height','33em') 
     .mouseup(function(){ 
       $(this).css('height','5.7em');  
     });  
    }); 
}); 

http://jsfiddle.net/bryank/afcnR/

我想我在這裏失去了一個基本的概念。我得到了我的下拉菜單使用jQuery的工作但它只能工作一次，然後停止工作。我需要mouseup事件回到函數的開頭部分如何？

Answer 1

您有一個競爭事件處理程序的情況，最後一個（將高度設置爲5.7em的）勝出。事件處理程序實際上是堆疊的，因此您不斷添加關閉菜單的其他副本。

嘗試獨立保持打開/關閉狀態。像這樣的東西（jsfiddle）：

$(document).ready(function() { 
    $('#nav').data('open', 0).mouseup(function() { 
     if ($(this).data('open') == 0) { 
      $(this).css('height', '33em').data('open', 1); 
     } else { 
      $(this).css('height', '5.7em').data('open', 0); 
     } 
    }); 
}); 

或者更好的是，移動CSS細節的CSS類：

#nav { height: 5.7em; } 
.open { height: 33em !important; } 

...並且只需撥動這個類和關閉（jsfiddle）：

$(document).ready(function() { 
    $('#nav').mouseup(function() { 
     $(this).toggleClass('open'); 
    }); 
}); 

Answer 2

使用一個類來標記當前狀態。這是一個非常有用的技術，有很多用途。在這種情況下，我使用了一個名爲「selected」的類，但是你可以使用任何你喜歡的。

這撥弄顯示它的工作：
http://jsfiddle.net/acturbo/afcnR/1/

的jQuery：

$(document).ready(function(){ 

     $('#nav').on("mouseup", function(){ 

      $(this).toggleClass("selected"); 

      if ($(this).hasClass("selected")){ 
       $(this).css('height','33em'); 
      }else{ 
        $(this).css('height','5.7em');  
      } 


     }); 
    });