0

アイコンをクリックしたときに最小化する固定フッターがあります

これは私のフィドルです http://jsfiddle.net/Qy6Sj/693/ 

#window{
width:400px;
border:solid 1px;
}

#title_bar{
background: #FEFEFE;
height: 25px;
width: 100%;
}
#button{
border:solid 1px;
width: 25px;
height: 23px;
float:right;
cursor:pointer;
}
#box{
height: 250px;
background: #DFDFDF;
}
.bar{margin-top:50px;}
4

8 に答える 8

2

実際にはトグル関数をクリック内に配置したため、正しく動作していませんでした。トグル関数をクリックの外に配置すると正常に動作しますが、+ を - 記号に変更します

    $("#button").click(function(){
    if($(this).html() == "-"){
        $(this).html("+");
    }
    else{
        $(this).html("-");
    }
});

    $("#button").toggle(
  function() {
    $("#title_bar").animate({ marginTop: "50px" }, 500)
  },
  function() {
    $("#title_bar").animate({ marginTop: "0px" }, 500);
  }
);

働くフィドル

または、この方法で行うことができます

$("#button").click(function(){
if($(this).html() == "-"){
    $(this).html("+");
        $("#title_bar").animate({ marginTop: "0px" }, 500)
}
else{
    $(this).html("-");
        $("#title_bar").animate({ marginTop: "50px" }, 500);
}


});

ここでフィドル

于 2013-09-13T07:28:33.827 に答える
2

この方法を試してください

$("#button").click(function(){
    var _self = $(this);
    if(_self.hasClass('active')){

        $("#title_bar").animate({ marginTop: "0px" }, 500,function(){
            _self.html("+");      
            _self.removeClass('active');  
        });
    }
    else{

        $("#title_bar").animate({ marginTop: "50px" }, 500,function(){
            _self.addClass('active');            
            _self.html("-");
        });
    }

});

ワーキングデモ

于 2013-09-13T07:51:11.780 に答える
1 
$("#button").on("click", function(){
if($(this).html() == "-"){
    $(this).html("+");
    $("#title_bar").animate({ marginTop: "0px" }, 500)
}
else{
    $(this).html("-");
    $("#title_bar").animate({ marginTop: "50px" }, 500)
}
});

これは機能します。

クリックとトグルの組み合わせが機能しなかった理由は、トグル自体がクリック ベースのイベントであるためです。したがって、クリックイベントを効果的に2倍にし、スタックさせていました。

于 2013-09-13T07:28:50.937 に答える
0

その非常に簡単なデモをここで試してください

$("#button").click(function(){
if($(this).html() == "-"){
    $(this).html("+");
        $("#title_bar").animate({ marginTop: "0px" }, 500)
}
else{
    $(this).html("-");
        $("#title_bar").animate({ marginTop: "50px" }, 500);
}


});
于 2013-09-13T08:40:29.553 に答える
0

トグルもクリック アクションとアニメーションを使用しているため、2 回使用する必要はありません。あなたは解決策に非常に近かった:-)。必要に応じてトグルのみを使用することもできます。

これはあなたが望むことをします！

$("#button").click(function(){
    if($(this).html() == "-"){
        $(this).html("+");
        $("#title_bar").animate({ marginTop: "50px" }, 500)
    }
    else{
        $(this).html("-");
         $("#title_bar").animate({ marginTop: "0px" }, 500);
    }  
});
于 2013-09-13T07:28:42.873 に答える
0

JavaScript を次のように変更します。

    $("#button").click(function(){
    if($(this).html() == "-"){
        $(this).html("+");

        $("#title_bar").animate({ marginTop: "50px" }, 500)

    }
    else{
        $(this).html("-");

    $("#title_bar").animate({ marginTop: "0px" }, 500);

    }

});
于 2013-09-13T07:28:44.090 に答える