使用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;
} 

- ler

---

你正在使用 .slideToggle()，但是你不想要动画效果？ - Sam

@Sam，这里的问题不在于容器。我的问题在于其中的元素，我不希望它们移动。例如箭头。如果你看一下这个fiddle，你会注意到它在切换div时的行为。我想保持上下滑动，但不想箭头像那样。我希望它能够与容器粘在一起。 - ler

它必须使用JavaScript吗？ - Mi-Creativity

不需要使用JavaScript。 - ler

Answer 1

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

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

随着过渡线动画化max-height属性，.slider中的overflow: hidden规则将显示内容，因为过渡的max-height值发生变化，同样地，当checkbox状态变为未选中时也是如此。

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>

- Mi-Creativity

---

我简直无法相信我以前从没想过这个。这太棒了。 - Jacob Raccuia

Answer 2

请使用toggle代替slideToggle。

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

如果您想使用slideToggle，请参考以下内容。希望这能帮到您。

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

更新

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

- Ibrahim Khan

---

将slideToggle更改为简单的toggle。 - Nicolas R

我希望容器可以进行slideToggle操作，而不会使容器内的元素移动。 - ler

Answer 3

更新

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

- zer00ne

---

幻灯片动画在哪里？请阅读我上面的最后一条评论。 - ler

你说，“我想切换一个 div，但不需要动画效果”，你应该相应地编辑你的问题。 - zer00ne

我在谈论 div 内部的元素。请阅读我的上一条评论，你就会明白我的意思。我会编辑问题。 - ler

笑死了，太吵了。这是一个知识分享网络，我只是分享了真相而已。而且，我开始的时候说了“非常尊重”，而你却说“有人给我一堆狗屎”？ - Mi-Creativity

你又一次把事情曲解了，我说“每次我走另一条路线，就会有人对我指手画脚”，因为你太紧张了，以为我在指你。如果你回想一下，我之前说过我尽量保持接近原始代码。请重新阅读并理解，不是所有的事情都和你有关。 - zer00ne