클릭했을 때 아코디언 패널 헤더를 타겟팅하는 방법

Question

대용량의 패널 본문이 포함 된 아코디언이 있습니다. 아코디언을 열면 맨 위로 이동하고 사본이 잘린 것처럼 보입니다. 이 문제를 해결할 수있는 수정 프로그램이 있습니까? 아니면 열려있는 아코디언을 사용하는 동안 패널 헤더를 대상으로해야합니까?

모양을 보려면 JSFiddle입니다. 어떤 응답을 볼 기대

,

폴

Answer 1

나는 비슷한 질문에 대답했지만 그것은 materialize.css 위해이었다.

내 논리를 조정할 수 있습니다. 원인은 내 스타일에 편향되어 있습니다. 그리고 그것은 내 이전의 대답과 동일하게, 나는

이 몸 낮은 높이를 가지고, 또한 아코디언 사이의 첫 번째 패널 요소입니다

• 경우 스크롤 효과가 적용되지 않습니다 있음을 명시하고 싶습니다 높이 원하는 것보다

---

패널 본체가 부트 스트랩의 붕괴 shown.bs.collapse 이벤트를 수신하여 (후 애니메이션) "표시"일단이 스크롤 효과를 적용, 그래서 높이보다 큰지 내 검증 작업을 수행 할 수 있습니다 내 원하는 높이.

---

언급을 높이 내 선택 최대 높이보다 크지되면 물론 이전의 코드 조각 헤더까지 스크롤되지 않습니다 따르면

Updated fiddle

$('.panel-collapse').each(function(){ 
    $(this).on('shown.bs.collapse', function(){ 
     var $this = $(this), 
      //$header = $this.siblings('.panel-heading'), 
      $parent = $this.parent(), 
      height = $this.height(), 
      maxHeight = 400; 

     if ($parent.is(':first-child')) return; 

     if (height > maxHeight) 
      $('html, body').animate({ 
       scrollTop: $parent.offset().top 
      }, 500); 
    }); 
}) 

. (제가 400으로 낮추었습니다. 위의 스 니펫을 참조하십시오.)

내가 만든 유효성 검사를 제거하려는 경우, if 부분을 모두 제거하면 여기에 있습니다.

$('.panel-collapse').each(function(){ 
    $(this).on('shown.bs.collapse', function(){ 
     var $this = $(this), 
      $parent = $this.parent(), 

     $('html, body').animate({ 
      scrollTop: $parent.offset().top 
     }, 500); 
    }); 
})