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

Question

为什么这段代码会尝试隐藏 div 然后再次显示它？使用火狐浏览器

$(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内

<强> Button inside demo

根据您的demo

更改代码如下:

$(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

注意

您还可以从 #tool1 中删除 href

目前#tool1是链接标签，如果你想使用按钮，只需从上面的代码中删除e.preventDefault()即可。