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

Change elements height not working on second push

本文关键字：不起作用 元素 高度 第二次      更新时间：2023-09-26

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

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

Fiddle：http://jsfiddle.net/mdecler/e4XED/

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

谢谢你的帮助！

考虑将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/

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

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

查看此jsFiddle

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

正如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
    });
相关文章：