更改元素高度在第二次推送时不起作用答案

【问题标题】：Change elements height not working on second push更改元素高度在第二次推送时不起作用
【发布时间】：2012-10-08 21:31:45
【问题描述】：

我有一个增加元素高度的按钮（#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 可以很好地增加高度，但是当我再次按下按钮时，我无法降低高度！我做错了什么？

感谢您的帮助！

【问题讨论】：

标签： javascript jquery html css height

【解决方案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');            
            }
        });
    });

演示链接：

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

【讨论】：

一个小问题，是我还是我需要按两次按钮才能使用它？
嗯，它似乎按我的预期工作。您使用的是什么浏览器/版本？
还有什么版本的jQuery？这些信息可能会帮助我们弄清楚您所看到的内容。

【解决方案2】：

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

【讨论】：

live 已弃用，您现在必须使用 on。检查我的答案。

【解决方案3】：

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

看到这个jsFiddle

注意：不要使用live，它已被弃用。

【讨论】：

【解决方案4】：

就像 aleksey 所说，使用 live。或者您可以添加一个类并检查它是否存在。喜欢：

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

【讨论】：