Question

我想在没有内容动画的div上使用jQuery方法.slideToggle，但我似乎无法实现这一点。当div使用.slideToggle时，$('#tgl').on('click', function () { $('.toggled_div').slideToggle(); });内的所有元素都会移动，包括箭头（我不想移动）。请查看我的小提琴https://jsfiddle.net/ch4jmqz8/

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

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

{{1}}

Answer 1

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

当隐藏的checked获得label #toggle:checked ~ .slider状态时，将应用此max-height条件并将200px属性更改为{{1而不是其原始值0，此属性将受到此transition: all 1s;

的影响

由于转换线会为max-height属性设置动画，overflow: hidden中此.slider的规则会在转换后的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>

Answer 2

使用toggle代替slideToggle。

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

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

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

<强>更新

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

Answer 3

<强>更新

当OP要求使用三角形平滑过渡切换时。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

一起使用

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

没有元素动画的jQuery slideToggle

3 个答案: