Question

一旦我点击该框，我希望该框扩展到300x300px。如果我再次点击，我希望它压缩到100 x 100px。到目前为止，我已经做到了这一点。

但我想重复这个点击动作。因此，如果我再次单击该框，它将扩展为300 x 300，如果我再次点击它将压缩到100 x 100，依此类推....

HTML

<div class="box"></div>

CSS

.box{width: 150px; height: 150px; background:blue;}

Jquery的

$(".box").click(function(){
$(this).height("300px").width("300px");
$(this).click(function() {
    $(this).height("100px").width("100px");
});

}）;

Answer 1

考虑通过CSS做到这一点;因为这纯粹是一种视觉效果，所以它属于你的CSS而不是你的JavaScript。

$('.box').click(function () { $(this).toggleClass('big') });

CSS：

.box{width: 150px; height: 150px; background:blue;}
.box.big{width:300px; height:300px; }

现在，您可以使用CSS过渡来为更改设置动画。

.box {
  transition:width 2s, height 2s;
}

此处a demo。

Answer 2

如果你没有在你的问题中输入错误，并且你真的希望它从150x150开始，然后在100到300之间切换，我会做这样的事情：

http://jsfiddle.net/bd7hx/

.box {
    width: 150px;
    height: 150px;
    background:blue;
}

.big {
    height:300px;
    width:300px;
}

.small {
    height:100px;
    width:100px;
}

$(".box").one('click', function () {
    $(this).addClass('big').on('click', function () {
        $(this).toggleClass('big small');
    });
});

第一次点击会将其从150到300像素的高宽变宽，然后从那一点开始，在100到300像素之间切换。

Answer 3

我会在Click函数上设置一个类。

当用户点击切换课程时。

jQuery Documentation

Answer 4

您需要在这两种状态之间切换，您只需向对象添加越来越多的点击处理程序。试试这个：

的CSS：

.box.big { width: 300px; height: 300px;}
.box.small { width: 150px; height: 150px;}

JS：

$('.box').click(function() {
   if ($(this).hasClass('big')) {
      $(this).addClass('small').removeClass('big');
   } else {
      $(this).addClass('big').removeClass('small');
   }
}

更简单的方法是将这两个尺寸中的一个作为框的默认样式，然后添加/删除“其他尺寸”样式。

Answer 5

toggleClass是你的朋友：

$('.box').click(function(){
    $(this).toggleClass('large');
});

在这里摆弄：http://jsfiddle.net/ackerman/fwyja/

Answer 6

$('.box').click(function(){
        var dataWidth = $(this).data( 'width' ),
        width = dataWidth !== undefined ? dataWidth : 150;

        if(width < 300) {
           $(this).width('300px').height('300px').data('width', 300);
        }
        else {
          $(this).width('100px').height('100px').data('width', 100);
        }
  }
);

http://jsfiddle.net/7zLj2/

单击时将框宽度更改为新宽度，然后在第二次单击时将其更改为原始宽度，然后重复处理

6 个答案: