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

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

我想我在这里遗漏了一个基本概念......我让我的下拉菜单使用 jQuery 工作,但它只工作一次,然后停止工作。我需要 mouseup 事件如何返回到函数的开头?

4

2 回答 2

4

您有一个竞争事件处理程序的案例,最后一个(将高度设置为 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');
    });
});
于 2013-05-07T20:39:30.973 回答
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');      
           }


        });
    });
于 2013-05-07T20:41:04.663 回答