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
内

<强> 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

注意

您还可以从href

中删除#tool1

目前#tool1是链接代码，如果您想使用按钮，请从上面的代码中删除e.preventDefault()。

Answer 2

根据您的反馈，如果你想要的只是将状态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;
}

请参阅DEMO

Answer 3

您可以通过添加：

来禁用show() jQuery动画

jQuery.fx.off = true;

代码行。

阅读more有关此属性的信息。