0

ユーザーが div 自体をクリックすると、展開してコンテンツを表示する div があります。div は JavaScript を使用してアニメーション化されているため、1 回のクリックで小さいものから大きいものにすぐに変更するよりも少し滑らかです。

コーディングをどれだけ変更しても、再び縮小することはありません。

手がかり？

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

2 に答える 2

2

ブール値を保持し、それを使用して拡大または縮小するかどうかを決定する必要があります。

<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>
于 2013-08-11T23:03:28.510 に答える
0

言われているように、縮小するか拡大するかを覚えておくためにブール値が必要になります。このコードは初期サイズを記憶します。また、単一のクラスを設定するだけでなく、もう少し多くのことを行うこともできます。もう少し拡張性があります。

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});
}
于 2013-08-11T23:12:20.203 に答える