Question

我有3个盒子，红色的盒子应该在开始时比其他盒子（通过css）更大。现在，当我点击绿色或黄色框时，红色变小的尺寸与绿色或黄色相同，然后单击。然后点击的一个获得红色的CSS样式（大小）。我想用JQuery做但不知道怎么做？

.r1, .r2, .r3{
      width: 80px;
      height: 80px;
      margin: 40px;
      float: left;
    }
    
    .r1{
        background-color: red;
        position: inherit;
            transform: scaleY(1.2);
            transform: scale(1.2);
            transform-origin: center;
            border: 2px solid #15dc6e;
    }
    .r2{
        background-color: green;
    }
    .r3{
        background-color: yellow;
    }

<div class="content">
  <div class="r1"></div>
  <div class="r2"></div>
  <div class="r3"></div>
</div>

小提琴：https://jsfiddle.net/cwx3ukra/16/

Answer 1

试试这个：

Codepen：https://codepen.io/samandalso/pen/qKrLLM

$(function() {
    $('.content div').on('click', function(){
      $('.content div').not($(this)).removeClass('scaled');
      $(this).toggleClass('scaled');
    });
});

Answer 2

$(document).ready( () => {
	$('.content div').click( e => {
  	// Remove zoom class from all elements
  	$('.content div').removeClass('big');
    // Only apply to the clicked element
  	$(e.target).addClass('big');
  });
})

.r1,
.r2,
.r3 {
  width: 80px;
  height: 80px;
  margin: 40px;
  float: left;
  transform: scale(1);
  transition: all 500ms ease-out;
}

.r1 {
  background-color: red;
}

.r2 {
  background-color: green;
}

.r3 {
  background-color: yellow;
}

.big {
  transform: scale(1.2);
  border: 2px solid #15dc6e;
  transform-origin: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="r1 big"></div>
  <div class="r2"></div>
  <div class="r3"></div>
</div>

Working JSFiddle Here

您可以使用纯CSS实现平滑过渡：

.r1,
.r2,
.r3 {
  width: 80px;
  height: 80px;
  margin: 40px;
  float: left;
  transform: scale(1);
  transition: all 500ms ease-out;
}

.big {
  transform: scale(1.2);
  border: 2px solid #15dc6e;
  transform-origin: center;
}

transition属性将自动从一个规则转换到另一个规则。在此示例中，它从transform: scale(1)转换为transform: scale(1.2)。

单击更改多个div的css样式？

2 个答案: