jquery - 使用jQuery再次单击时单击以增加高度并降低回原始高度？

Question

如果我想单击一个按钮，然后将部分的高度增加 300 像素，当我再次单击此按钮时，它会将高度降低到初始高度，我该怎么办。

这是我的按钮代码

<div id="section">
   <button id="btn1">expand</button>
   <button id="btn2">expand2</button>
   <button id="btn3">expand3</button>
</div>

我在 div 中有 3 个按钮。单击每个按钮将使部分的高度增加 300px，如果再次单击相同的按钮，它将高度降低到初始高度。我可以用 jQuery 做什么来使它工作。

Answer 1

你可以这样做：

$('button').live('click', function() {

    if ($(this).hasClass('big')) {
        $(this).removeClass('big');
        $(this).height(originalHeight);
    } else {
        originalHeight = $(this).height();
        $(this).addClass('big');
        $(this).height(originalHeight+300);
    }
})

Answer 2

$("#section button").click(function(){
    if (typeof($(this).data('expanded')) === "undefined" || $(this).data('expanded') == "0") {
        $("#section").height($("#section").height()+300);
        $(this).data('expanded', "1");
    } else {
        $("#section").height($("#section").height()-300);     
        $(this).data('expanded', "0");
}
});

小提琴：http: //jsfiddle.net/sSGty/2/

Answer 3

将btn类应用于您的按钮并使用 click 事件.btn。检查高度是否300px比删除height其他section高度300px

$('.btn').click(function(){
    var h = parseInt($('#section').css('height'), 10);
    if(h != 300)
    {
        $('#section').css('height', '300px');
    }
    else
    {
        $('#section').css('height', '');
    }
});

HTML

<div id="section">
   <button id="btn1" class="btn">expand</button>
   <button id="btn2" class="btn">expand2</button>
   <button id="btn3" class="btn">expand3</button>
</div>

小提琴

Answer 4

$("button").toggle(function(){
$("#section").height($("#section").height()+300);
},function(){
$("#section").height($("#section").height()-300);

});

参考切换