Bootstrap 3 collapse scrollTop

我对Bootstrap 3的手风琴有点麻烦。Bootstrap 3 collapse scrollTop

我想要做的是将一个类添加到手风琴切换，然后滚动/跳转到新添加的类。添加/删除类的工作正常，我想我只是在同一个块添加scrollTop ...但没有这样的运气。我错过了什么？

这里是它是如何设置：

链接面板：

<ul> 
    <li><a data-toggle="collapse" data-parent="#accordion" href="#panel1">Panel1</a> 
    </li> 
    <li><a data-toggle="collapse" data-parent="#accordion" href="#panel2">Panel2</a> 
    </li> 
    <li> 
     <a data-toggle="collapse" data-parent="#accordion" href="#panel3" ">Panel3</a></li> 
</ul>

面板：

<div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
    <a class="accordion-toggle aWeight active" data-toggle="collapse" data-parent="#accordion" href="#panel1"> 
    Panel 1 
    </a> 
    </h4> 

     </div> 
     <div id="panel1" class="panel-collapse collapse in"> 
      <div class="panel-body">Anim pariatur...</div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
    <a class="accordion-toggle aFitness" data-toggle="collapse" data-parent="#accordion" href="#panel2"> 
    Panel 2 
    </a> 
    </h4> 

     </div> 
     <div id="panel2" class="panel-collapse collapse"> 
      <div class="panel-body">Anim pariatur...</div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
    <a class="accordion-toggle aFitness" data-toggle="collapse" data-parent="#accordion" href="#panel3"> 
    Panel 3 
    </a> 
    </h4> 

     </div> 
     <div id="panel3" class="panel-collapse collapse"> 
      <div class="panel-body">Anim pariatur...</div> 
     </div> 
    </div> 
</div>

，最后我使用这个脚本来切换活动类：

$(function() { 
    $('.accordion').on('show', function (e) { 
     $(e.target).prev('.accordion-heading').find('.accordion-toggle').addClass('active'); 
    }); 
    $('.accordion').on('hide', function (e) { 
     $(this).find('.accordion-toggle').not($(e.target)).removeClass('active'); 
    }); 
});

来源

2013-10-08 bxmarg

当您使用Bootstrap 2事件时，请参阅Bootstrap 3，请参阅：http://getbootstrap.com/javascript/#collapse。崩溃插件已经添加了一个类（.in）。

当shown.bs.collapse触发时，您的“新建”面板具有“.in”类，当hide.bs.collapse触发时，“旧”面板仍具有“.in”类。

尝试：

$(function() { 
    $('#accordion').on('shown.bs.collapse', function (e) { 
     var offset = $('.panel.panel-default > .panel-collapse.in').offset(); 
      if(offset)$('html,body').scrollTop(offset.top); 
    }); 
});

来源

2013-10-08 07:41:28

啊，我贴了错误的代码。它正在使用bootstrap 3事件。但现在就尝试一下。 – bxmarg

完美工作。只需要在一些动画中进行折腾以使其更清洁。谢谢！ – bxmarg

$(".accordion-body").on("shown", function() { 
var id = $(this).attr('id'); 
$('html, body').animate({scrollTop: $('#'+id).offset().top + -50}, 1000); 
}); 
});

来源

2013-12-29 05:37:00 rotamota

Bootstrap 3 collapse scrollTop

回答

相关问题