单击时如何定位手风琴面板标题

Question

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

这是JSFiddle，看看它的外观。

期待看到任何回复，

保罗

Answer 1

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

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

不应用滚动效果

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

---

一旦面板主体“显示”（动画后）通过监听引导程序的折叠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

---

根据评论，一旦高度不大于我选择的最大高度，之前的 sn-p 当然不会向上滚动到标题。 （我已经降到了400，见上面sn-p）

如果您想删除我所做的验证，请删除所有 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);
    });
})