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

,536,913 63,210

JS

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

(I는 다음 내용을 알고있다(). 다음()를 두 번 불필요).

다음 div를 열면 아래쪽이 제 위치에 있고 화면이 화면 밖으로 튀어 나오게하고 싶습니다. 그 이유는 콘텐트가 추가 될 때 스크롤을 계속하기를 원하지 않기 때문이며 새로 추가 된 콘텐트는 대체로 화면 중앙에 머물러 있기 때문입니다. 콘텐츠가로드 된 후에 일부 .scroll() - 함수를 사용하여 부분적으로 가능하다는 것을 알았지 만 콘텐츠가 뒤에서가 아닌 토글되어 있기 때문에 콘텐츠를 푸시해야합니다.

마찬가지로 토글을 끄면 상단이 아래로 당겨 져야합니다.

TL; DR : 아래의 DIV 내가 비슷한 작업을했다

Answer 1

.slideToggle()를 사용할 때 '고정'합시다 -하는 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'); 
      } 
     } 
    }); 
});