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


        });
    });