问

如何让Bootstrap 3折叠式手风琴面板加载到其内容的顶部而不是中途下载？

多米音乐_34363545 发布于 2023-02-09 19:59

bootstrap

default

seo

get

我有一系列bootstrap 3手风琴面板,里面有很多内容,几乎可以正常工作......它们按照需要加载折叠,然后在按下时打开,在过程中折叠任何其他打开的面板; 都好...

但是当我打开Panel 1并向下滚动其内容,然后打开Panel 2时,Panel 2内容将"向上"加载到可见浏览器窗口的顶部; 意味着用户必须向上滚动才能看到Panel 2的顶部.令人沮丧!

我希望加载Panel 2,以便在浏览器窗口中显示它的顶部.

这是一个JSFiddle



关于我如何解决这个问题的任何想法,好吗？



        
        2 个回答
        
                        
                浏览器将始终尝试保持其在页面中的当前位置,即使您折叠/显示可能破坏该位置的大型元素也是如此. 

您可以使用Gokhan建议的两部分方法来解决这个问题:


点击手风琴所显示事件的事件处理程序
显示后滚动到当前面板的顶部.


第一部分非常简单.从Collapse Events Docs中我们会发现:


  shown.bs.collapse - 当一个折叠元素对用户可见时将触发此事件(将等待CSS转换完成).


我们会像这样听这个事件:

$('#accordion').on('shown.bs.collapse', function (e) {
   var id = $(e.target).prev().find("[id]")[0].id;
   navigateToElement(id);
})


在shown事件中,我已经调用的函数navigateToElement,并在通过id从可视面板的标题.导航功能将使用jquery的animate滚动到id的位置:

function navigateToElement(id) {
    $('html, body').animate({
        scrollTop: $("#" + id).offset().top
    }, 1000);
}


在jsFiddle工作演示

        

                
                    2023-02-09 20:02  回答
                       dsvd2010
                
            

                        
                http://bootply.com/101026

这是另一种方法(类似于@KyleMit)..找到打开的面板并使用jQuery滚动到它的顶部:

$('#accordion').on('shown.bs.collapse', function () {

  var panel = $(this).find('.in');

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

});

        
                
                    2023-02-09 20:04  回答
                       大好
                
            
                    

    

    
    
        撰写答案
        
            
                
                    回答问题...



    
    
        今天，你开发时遇到什么问题呢？
        立即提问
    

    
        热门标签