javascript - 无法创建动态 div 以在单击和返回时更改大小

Question

我创建了一个包含多个 div 的动态页面，每个 div 的大小设置为 30%，现在我尝试制作一个 Jquery，允许您在每次单击时将 div 大小更改为 100% 并返回 30%在重新点击 div 时，不幸的是我的代码不起作用:

这是我当前使用的 jquery:

$( document ).ready(function() {
  $(".div").click(function() {
    if($(this).css("width") == "30%")
      $(this).css("width", "100%");
    else
      $(this).css("width", "30%");
  }); 
});

那是div的css

.div{
    min-height:430px;
    box-shadow: 1px 1px 7px 0 rgba(0,0,0,0.1);
    margin:10px;
    float:left;
    width: 30%;
    min-width: 300px;
    transition: width 1s;
}

有什么解决办法吗？

Answer 1

将其与父宽度进行比较:

$( document ).ready(function() {
  $(".div").click(function() {
    if($(this).outerWidth()==$(this).parent().width())
      $(this).css("width", "30%");
    else
      $(this).css("width", "100%");
  }); 
});