Question

我有一个div扩展，一旦用户点击div本身就会显示内容。 div使用javascript进行动画制作，只需点击一下即可立即从小到大改变。

我不断扩大，只是不再缩小 - 无论我改变了多少编码。

线索？

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script> 
$(document).ready(function(){
  $("#statExp").click(function(){
    $("#statExp").animate({height:'100px'});    
  });
}); 
</script> 

<div id="statExp" style="background:#98bf21;height:20px;width:450px;position:relative;overflow:hidden;"></div>

Answer 1

您需要保留一个布尔值并使用它来决定是扩展还是缩小：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script>
isLarge = false; 
$(document).ready(function(){
  $("#statExp").click(function(){
    $("#statExp").animate({height:(isLarge ? '20px' : '100px')});
    isLarge = !isLarge;    
  });
}); 
</script> 

<div id="statExp" style="background:#98bf21;height:20px;width:450px;position:relative;overflow:hidden;"></div>

Answer 2

如前所述，你需要一个布尔值来记住它是否应缩小或扩展。此代码将记住初始大小。它还允许您做一些不仅仅是设置一个类。它稍微有点可扩展。

var statHeight;

$(document).ready(function(){
    statHeight = $("#statExp").css('height');
    var toggle = false;
    $("#statExp").click(function(){
        if (!toggle) {
            expand($(this));
            toggle = true;
        } else {
            shrink($(this));
            toggle = false
        }
    });
});

function expand(elem) {
    elem.animate({height:'100px'});
}

function shrink(elem) {
    elem.animate({height:statHeight});
}

单击<div>展开，然后再次单击以缩小 - 它正在扩展，而不是缩小</div>

2 个答案: