jQuery slideToggle - div跳动

Question

我是一名有用的助手，可以为您翻译文本。

我有一个问题。有一个jQuery“更多文本”动画div（slideToggle），显示的文本会跳动。我不知道为什么。有人能帮我吗？

HTML：

<div class="slide-button two">
   <span>More</span>
   <div class="hidden">
      <p>hidden</p>
   </div>
 </div>

jQuery：

$(document).ready(function () {
    $('.hidden').hide();
    $('.slide-button').click(function () {
        $('.hidden').slideToggle('slow');
    });
});

在 jsfiddle 上的问题

- Radek Homola

Answer 1

只需从 span 中删除 float:left：

.slide-button span {
  display: block;
  font-family: "Playfair Display";
  font-size: 20px;
  font-weight: 400;
  color: #da3c2b;
  width: 90%;
  margin: 0;
}

JSFiddle演示

- Jacob G

Answer 2

你可以按照Jacob Gray的建议删除float: left，或者尝试在类.slide-button .hidden中添加overflow: hidden;。

例如：

$(document).ready(function() {
  $('.hidden').hide();
  $('.slide-button').click(function() {
    $('.hidden').slideToggle('slow');
  });
});

.slide-button {
  display: block;
  width: 94.230769%;
  -webkit-box-shadow: 0 0 3px rgba(166, 166, 166, 0.5);
  box-shadow: 0 0 3px rgba(166, 166, 166, 0.5);
  background-color: #f7f7f7;
  background: -webkit-linear-gradient(180deg, #f7f7f7 0%, #f2f2f2 100%);
  background: linear-gradient(180deg, #f7f7f7 0%, #f2f2f2 100%);
  -webkit-border-radius: 3px;
  border-radius: 3px;
  cursor: pointer;
  padding: 25px 0 0 30px;
  position: relative;
  margin-bottom: 30px;
  min-height: 57px;
  overflow: hidden;
}
.slide-button span {
  display: block;
  font-family: "Playfair Display";
  font-size: 20px;
  font-weight: 400;
  color: #da3c2b;
  float: left;
  width: 90%;
  margin: 0;
}
.slide-button:after {
  position: absolute;
  content: '';
  background: url(../imgs/arrow.png) no-repeat;
  display: inline-block;
  width: 20px;
  height: 20px;
  top: 40px;
  right: 30px;
}
.slide-button:hover {
  background-color: #f7f7f7;
  background: -webkit-linear-gradient(0deg, #f7f7f7 0%, #f2f2f2 100%);
  background: linear-gradient(0deg, #f7f7f7 0%, #f2f2f2 100%);
}
.slide-button .hidden {
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}
.slide-button .hidden p {
  padding: 25px 0 40px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide-button two">
  <span>More</span>
  <div class="hidden">
    <p>content jumps</p>
  </div>
</div>

- Stewartside

---

呵呵，这是 Jacob Gray :P 无论如何都是一个好答案 :) - Jacob G

看来我的疲劳追上了我 :P - Stewartside