我有一个类为 .box 的矩形，在它里面，我有一个类为 .btn 的按钮。我需要以这样一种方式产生效果，即当我单击按钮时，矩形应该从中心分成 2 部分，一个部分应该向左移动，另一个部分应该向右移动。我如何使用 jquery 或 javascript 来做到这一点？或者有什么方法可以不使用 jquery 或 javascript 来实现吗？
这是我的 HTML:
<div class="box">
<button class"btn"> click </button>
</div>
这是我的 CSS:
.box{
width:500px;
height:500px;
background-color:royalblue;
}
最佳答案
您不能拆分 HTML 元素。但是，如果您想要实现的只是某种视觉效果，您可以向其中添加其他元素。单击您的 .btn 后，您可以 toggleClass()在它们上面，所以它们的 width 减小了。结合css transition属性，它将被动画化。
参见 my fiddle
关于javascript - 使用javascript将一个div分成2个，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41129521/