jQuery 没有元素动画的 slideToggle

Question

我想在 div 上使用 jQuery 方法 .slideToggle，但它的内容没有动画，但我似乎无法让它工作。当我在其上使用 .slideToggle 时，div 中的所有元素都会移动，包括箭头（我不想移动）。请查看我的 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;
}

Answer 1

使用 toggle 而不是 slideToggle。

$('.toggled_div').toggle();

如果您想使用 slideToggle，请尝试以下操作。希望这会有所帮助。

$('.toggled_div').slideToggle(0);

更新

您可能需要这个 https://jsfiddle.net/ch4jmqz8/1/。只需将高度设置为 toggled_div.

Answer 2

更新

由于 OP 要求使用三角形进行平滑过渡切换。

:before 替换为包含蓝色三角形字体的 div，因此现在可以像任何其他元素一样对其进行定位和操作。没有额外的 JS，也没有复杂的 CSS 动画。

https://jsfiddle.net/zer00ne/bq85g8mt/

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

.toggled_div {
  background: #3597FF;
  padding: 15px;
  width: 300px;
  margin-top: 20px;
}
#tri {
  position: absolute;
  left: 15px;
  top: 30px;
  color: #3597FF;
  font-size: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tgl">toggle</div>
<div id="tri">▲</div>

<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>

将 .toggleClass 与 .hide { display: none; } 和 .show { display: block;}

结合使用

https://jsfiddle.net/zer00ne/79o4L4jx/

$('#tgl').on('click', function() {
  $('.toggled_div').toggleClass('hide show');
});

.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;
}
.hide {
  display: none;
}
.show {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tgl">toggle</div>
<div class="toggled_div hide">
  some text here
  <br>some text here
  <br>some text here
  <br>some text here
  <br>some text here
  <br>
</div>

Answer 3

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

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

影响

由于过渡线为 max-height 属性设置动画，.slider 中的此 overflow: hidden 的规则将显示内容作为过渡的 max-height 值更改，上面说的是 checkbocx 状态何时更改为未选中。

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

jQuery slideToggle without the elements animating

jquery

toggle

slidetoggle