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');
    });
});

ISSUE on jsfiddle

Answer 1

只需从范围中移除float:left：

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

JSFiddle Demo

Answer 2

您可以按照雅各布格雷的建议删除float: left，但您也可以尝试将overflow: hidden;添加到课程.slide-button .hidden

举个例子：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery slideToggle - div跳转

2 个答案: