没有元素动画的jQuery slideToggle

我想在没有内容动画的 div 上使用 jQuery 方法 .slideToggle，但我似乎无法让它工作。当我在其上使用 div 时，.slideToggle 中的所有元素都会移动，包括箭头(我不想移动)。请查看我的 fiddle https://jsfiddle.net/ch4jmqz8/

这是我正在使用的 JS 代码:

$('#tgl').on('click', function () {
    $('.toggled_div').slideToggle();
});

CSS:

.toggled_div {
    background: #3597FF;
    padding: 15px;
    width: 300px;
    margin-top: 20px;
}
.toggled_div:before {
        content: '';
    position: absolute;
    left: 20px;
    margin-top: -34px;
    border: 10px solid transparent;
    border-bottom-color: #3597FF;
}
.toggled_div div {
  background: #ddd;
  padding: 10px;
  margin: 10px;
}

最佳答案

好的，这是一个纯 CSS 解决方案，我们可以使用 div#tgl 的伪选择器 :checked 代替 checkbox ，我们还需要使用 display:none 隐藏复选框并依靠单击其 label for="" 来切换转换。

由于隐藏的 checkbox 通过其 checked 获得 label 状态，因此将应用此 #toggle:checked ~ .slider 条件，我们将 max-height 属性更改为 200px 而不是其原始值 0 ，而此属性将受此 transition: all 1s; 影响

由于过渡线对 max-height 属性进行动画处理，overflow: hidden 中该 .slider 的规则将随着过渡后的 max-height 值的变化而显示内容，当 checkbocx 状态变为 unchecked 时，上述相同。

JS Fiddle

.toggled_div {
  background: #3597FF;
  width: 300px;
  margin-top: 20px;
  padding: 15px;
}
.toggled_div:before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  border: 10px solid transparent;
  border-bottom-color: #3597FF;
}
.slider {
  width: 300px;
  max-height: 0;
  overflow: hidden;
  position: relative;
  -webkit-transition: all 1s;
  transition: all 1s;
}
#toggle {
  display: none;
}
label[for="toggle"] {
  cursor: pointer;
}
#toggle:checked ~ .slider {
  max-height: 200px;
}

<input id="toggle" type="checkbox">
<label for="toggle">toggle</label>
<div class="slider">
  <div class="toggled_div">
    some text here
    <br>some text here
    <br>some text here
    <br>some text here
    <br>some text here
    <br>
  </div>
</div>

关于没有元素动画的jQuery slideToggle，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34530363/