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

アレクセイが言ったように、ライブを使用してください。または、クラスを追加して、それが存在するかどうかを確認することもできます。お気に入り：

$('.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 に答える