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>