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');
    });
});