如何在点击

Question

我的手风琴包含大型副本作为面板主体。当我打开任何手风琴时，它会移到顶部并且副本似乎被切断了。是否有任何解决方法可以解决这个问题，或者需要在打开手风琴时定位面板标题？

这是JSFiddle，看看它的外观。

期待看到任何回复，

保

Answer 1

我已经回答了类似的问题，但问题是materialize.css。

你可以调整我的逻辑，因为这个偏向于我的风格。为了使它与我之前的答案相同，我还要声明如果

不应用滚动效果

• 这是手风琴之间的第一个面板元素
• 它的身高低于所需的身高

通过聆听bootstrap的折叠shown.bs.collapse事件，一旦面板主体“显示”（动画后），这将应用滚动效果，因此我可以验证高度是否大于我想要的高度。 / p>

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