1

このコードが div を非表示にしようとするのに、再度表示するのはなぜですか? ファイアフォックスの使用

$(document).ready(function(){

    $("#tool1").click(function(){
       if($('#status').height() > 100){
           $('#status').css('height','50px').show();
       }    
    });

});

これまでのところ、彼ら全員が働いてくれてありがとう。ただし、これは私が DEMOを持っている正確なコードです

4

3 に答える 3

6
$("#tool1").click(function(){
   if($('#status').height() > 100){
     $('#status').hide(500, function() {  // hide the div
        $(this)
             .css('height','50px')  // change the height
             .show(500); // then show again
     });
   }    
});

デモ

上記のコメントによると

$("#tool1").click(function(){
   var orig = $('#status').height(),
       target = orig == 250 ? 50 : 250;
       $('#status').animate({
           height: target      
       },1000);  
});

デモ

以下のコメントによると

  • ボタンは内側にあります#status

デモ内のボタン

あなたのデモによると

次のようにコードを変更します。

$(document).ready(function() {
    $("#tool1").click(function(e) {
        e.preventDefault(); // preventDefault() for pare reload
        var $statusDiv = $('#status');
        if ($statusDiv.height() > 100) {
            $statusDiv.height(50);
        }
        else {
            $statusDiv.height(250);
        }
    });
});

デモ

ノート

hrefから削除することもできます#tool1

上記のコードから#tool1削除するだけでなく、ボタンを使用する場合は、現在リンクタグです。e.preventDefault()

于 2012-07-04T15:33:54.130 に答える
1

フィードバックに基づいて、ステータスdivの高さを250から50の間で切り替えるだけの場合は、次のように使用できます。

$(document).ready(function() {
    $("#tool1").click(function() {
        var $statusDiv = $('#status');
        if ($statusDiv.height() > 100) {
            $statusDiv.height(50);
        }
        else
        {
            $statusDiv.height(250);
        }
    });
});

あなたが他のコメントで概説したように、私はこれをHTMLに基づいています:

<div id="status">
    <button id="tool1">
        tool 1 div
    </button>
</div>

視覚的な表現のために、デフォルトの高さ250のスタイルと境界線を適用しました。

#status{
    border: 1px solid black;
    height: 250px;
}

デモを見る

于 2012-07-04T15:52:37.787 に答える
0

show()次を追加して、jQueryアニメーションを無効にできます。

jQuery.fx.off = true;

コード行。

このプロパティの詳細をご覧ください。

于 2012-07-04T15:34:28.643 に答える