0

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

谢谢你的帮助！

4

4 回答 4

3

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

于 2012-09-06T13:16:58.900 回答
0

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

于 2012-09-06T13:14:51.020 回答
0

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

看到这个jsFiddle

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

于 2012-09-06T13:16:18.337 回答
0

就像 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
    });
于 2012-09-06T13:18:48.323 回答