如何在點擊時定位手風琴面板標題

Question

我有一個手風琴，其中包含大型副本作爲面板主體。當我打開任何手風琴時，它會進入頂部，副本似乎被切斷。有沒有解決方案可以解決這個問題，還是需要在開放手風琴的同時瞄準面板標題？

這是JSFiddle看看它的外觀。

期待看到任何回覆，

保羅

Answer 1

我已經回答了類似的問題，但它是materialize.css。

你可能會調整我的邏輯tho，因爲這個偏向於我的風格。並使其同我以前的答案，我想還規定它，如果

• 這是手風琴的第一屏元件的滾動效應，不適用，
• 它的身體具有較低的高度比預期的高度

---

這適用的滾動效應，一旦面板主體通過監聽自舉的崩潰shown.bs.collapse事件「顯示」（後動畫），所以我可以做我的驗證的高度是否大於我想要的高度。

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

Updated fiddle

---

據評論，當然以前的片段不向上滾動到頭一旦高度不大於我所選擇的最大高度。 （我把它降低到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); 
    }); 
})