Как настроить таргетинг на панель панели аккордеона при нажатии на нее

Question

У меня есть аккордеон, который содержит большую копию в виде тела панели. Когда я открываю какой-либо аккордеон, он идет вверх, и копия кажется отрезанной. Есть ли какое-либо исправление для решения этой проблемы или нужно настроить табло на заголовок панели при открытом аккордеоне?

Это JSFiddle, чтобы увидеть, как это выглядит.

Ждем любые ответы,

Пол

Answer 1

Я ответил на подобный вопрос, но это было для materialize.css.

Вы можете настроить мою логику, потому что это смело связано с моим стилем. И сделать это так же, как мой предыдущий ответ, я хотел бы также заявить это, что скроллинг эффект не применяется, если

• Это первая панель элемент между аккордеона,
• Его тело имеет меньшую высоту чем требуемая высота

---

Это относится скроллинг эффект только тело панель «показано» (пост-анимация) путем прослушивания Распада shown.bs.collapse события Bootstrap, так что я могу делать свою проверку, является ли высота больше мой желаемый рост.

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