jquery - Jquery Simple Hide 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
     });
   }    
});

演示

根据上面的评论

$("#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()从上面的代码中删除。

Answer 2

根据您的反馈，如果您只想在 250 和 50 之间切换状态 div 的高度，您可以使用以下命令：

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

见演示

Answer 3

您可以通过添加禁用show()jQuery 动画：

jQuery.fx.off = true;

代码行。

阅读有关此属性的更多信息。