Jquery简单隐藏Div但设置较小的高度

Question

为什么这段代码试图隐藏div然后再显示它？使用firefox

$(document).ready(function(){

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

});

感谢您的帮助到目前为止他们都工作.然而,这是我有DEMO的确切代码

Answer 1

$("#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
     });
   }    
});

DEMO

根据上述评论

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

DEMO

根据以下评论

• 按钮在里面 #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);
        }
    });
});

DEMO

注意

您还可以删除href从#tool1

目前#tool1是链接标记,如果你想使用一个按钮,而不仅仅是e.preventDefault()从上面的代码中删除.