使.slideToggle（）將內容向上推動

Question

當我使用slideToggle（）時，它會自動向下推動內容，但我希望它可以向上推動內容。

圖片放映想要的行爲：

代碼示例：https://jsfiddle.net/sk8rr3qn/

HTML

<div class="container"> 
    <div class="top"> 
    first top 
    </div> 
    <div class="mid"> 
    mid1<br/>mid1<br/>mid1 
    </div> 
    <div class="mid"> 
    mid2<br/>mid2<br/>mid2<br/>mid2<br/>mid2<br/>mid2<br/>mid2 
    </div> 
    <div class="mid"> 
    mid3<br/>mid3<br/>mid3 
    </div> 
    <div class="mid"> 
    mid4<br/>mid4<br/>mid4<br/>mid4 
    </div> 
    <div class="mid"> 
    mid5<br/>mid5<br/>mid5<br/>mid5<br/>mid5 
    </div> 
    <div class="mid"> 
    mid6<br/>mid6<br/>mid6 
    </div> 
    <div class="bottom"> 
    first bottom 
    </div> 
</div> 
<br/> 
<div class="container"> 
    <div class="top"> 
    second top 
    </div> 
    <div class="mid"> 
    mid1<br/>mid1<br/>mid1 
    </div> 
    <div class="mid"> 
    mid2<br/>mid2<br/>mid2<br/>mid2<br/>mid2<br/>mid2<br/>mid2 
    </div> 
    <div class="mid"> 
    mid3<br/>mid3<br/>mid3 
    </div> 
    <div class="mid"> 
    mid4<br/>mid4<br/>mid4<br/>mid4 
    </div> 
    <div class="bottom"> 
    second bottom 
    </div> 
</div> 

CSS

.container { 
    width: 50%; 
    padding-left: 25%; 
} 

.top, .mid, .bottom { 
    position: relative; 
    width: 100%; 
    color: white; 
    background-color: green; 
} 

.mid { 
    display: none; 
} 

個

JS

$(document).ready(function(){ 
    $('.top, .mid').click(function(){ 
     if($(this).next().next().is(':hidden') || $(this).next().next().hasClass('bottom')) { 
     $(this).next().slideToggle(300); 
     } 
    }); 
}); 

（我知道的.next（）。next（）的兩次是不必要的）。

當我打開下一個div時，我想讓底部保持原樣並讓頂部從屏幕上移開。原因是我不想在添加內容時繼續滾動，新添加的內容將大致保持在屏幕的中心位置。我知道在內容加載之後使用一些.scroll（）函數部分可行，但我寧願在內容被切換時推送內容，而不是在之後。

類似地，關閉切換開關時應將頂部拉下。

TL;博士：讓使用.slideToggle（）時

Answer 1

我有類似的任務底部DIV被「固定」 - 資料覈實的名單，每一個div中，我們有「更多」按鈕，點擊後它顯示隱藏的內容並將其滾動到父div的頂部。

我也用這個不錯的插件http://manos.malihu.gr/jquery-custom-content-scroller/有很多有用的方法。

function details_opener() { 
    if($(this).hasClass('closen')) { 
    $(this).parent().next().slideDown(150, function(){ 
     $(this).parents('.mCustomScrollbar').mCustomScrollbar('scrollTo',$(this).parent()); 
    }); 
    $(this).removeClass('closen'); 
    $(this).children('.notice_text').show(); 
    $(this).children('.notice_text_short').hide(); 
    } else { 
    $(this).addClass('closen'); 
    $(this).children('.notice_text').hide(); 
    $(this).children('.notice_text_short').show(); 
    $(this).parent().next().slideUp(150); 
    } 
} 

Answer 2

我找到了解決我的問題的方法。我不確定是否有更好的方法，因爲它有一些缺陷，可能會有所改進。

$(document).ready(function(){ 
    $('.top, .mid').click(function(){ 
     if($(this).next().next().is(':hidden') || $(this).next().next().hasClass('.bottom')) { 
      if ($(this).next().is(':hidden')) { 
       $(this).next().show(); 
       var h = ($(this).next().height()); 
       $(this).next().hide(); 
       $(this).next().slideDown(600, 'linear'); 
       $('html, body').animate({ 
         scrollTop: $(window).scrollTop() + h 
        }, 600, 'linear'); 
      } else { 
       var h = ($(this).next().height()); 
       $(this).next().slideUp(600, 'linear'); 
       $('html, body').animate({ 
         scrollTop: $(window).scrollTop() - h 
        }, 600, 'linear'); 
      } 
     } 
    }); 
});