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的问题

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

Answer 2

您可以按照Jacob Gray的建议删除float: left ，但您也可以尝试添加overflow: hidden; 上课.slide-button .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>