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