Question

我有一个增加元素高度的按钮（#nav-button）。但我希望同样的按钮在再次按下时也会降低高度。代码：

    $(document).ready(function(){ 

        $('.nav-button-open').click(function(){
            $('.nav-bar').animate({height:'90px'}, 500);
            $("#nav-button").attr('class', 'nav-button-close');
        });
        $('.nav-button-close').click(function(){
            $('.nav-bar').animate({height:'10px'}, 500);
            $("#nav-button").attr('class', 'nav-button-open');
        });
    });

小提琴：http://jsfiddle.net/mdecler/e4XED/

jQuery增加了高度，但是当我再次按下按钮时我无法降低高度！我做错了什么？

谢谢你的帮助！

Answer 1

考虑将您的jQuery代码更改为：

    $(document).ready(function(){ 
        $('#nav-button').click(function(){
            if($(this).hasClass("nav-button-open")){
               $('.nav-bar').animate({height:'90px'}, 500);
               $("#nav-button").attr('class', 'nav-button-close');}
            else{
               $('.nav-bar').animate({height:'10px'}, 500);
               $("#nav-button").attr('class', 'nav-button-open');            
            }
        });
    });

DEMO LINK：

http://jsfiddle.net/e4XED/4/

Answer 2

我认为，你应该使用 .live（'click'，...），因为您动态更改按钮的类，但仅在开始时设置click事件。 Correct jsfiddle

Answer 3

加载jQuery脚本时，nav-button-close类不存在。使用on。

请参阅此jsFiddle

注意：请勿使用live，不推荐使用。

Answer 4

像aleksey说的那样，使用直播。或者您可以添加一个类并检查它是否存在。像：

$('.nav-button').click(function(){
        if($(this).hasClass('open')){
            $('.nav-bar').animate({height:'10px'}, 500);
            $(this).removeClass('open').addClass('close');
        }else{
            $('.nav-bar').animate({height:'90px'}, 500);
            $(this).removeClass('close').addClass('open');                 
        }1
    });

更改元素高度不适用于第二次推送

4 个答案: