Jquery 如何在手风琴面板标题单击时将其定位
我有一个手风琴,里面有一个大的面板。当我打开任何一个手风琴时,它都会转到顶部,而副本似乎被切断了。有没有解决这个问题的方法,或者需要在打开accordion时锁定面板标题 下面是一个例子,看看它看起来怎么样 期待您的回复Jquery 如何在手风琴面板标题单击时将其定位,jquery,html,css,twitter-bootstrap-3,accordion,Jquery,Html,Css,Twitter Bootstrap 3,Accordion,我有一个手风琴,里面有一个大的面板。当我打开任何一个手风琴时,它都会转到顶部,而副本似乎被切断了。有没有解决这个问题的方法,或者需要在打开accordion时锁定面板标题 下面是一个例子,看看它看起来怎么样 期待您的回复 保罗我已经回答了类似的问题,但那是为了我 你可以调整我的逻辑,因为这一个是由我的风格偏见。为了和我之前的回答相同,我还想声明,如果 这是手风琴之间的第一个面板元素 其身体的高度低于所需的高度 当面板主体“显示”(后期动画)时,通过监听bootstrap的collapse
保罗我已经回答了类似的问题,但那是为了我 你可以调整我的逻辑,因为这一个是由我的风格偏见。为了和我之前的回答相同,我还想声明,如果
- 这是手风琴之间的第一个面板元素
- 其身体的高度低于所需的高度
当面板主体“显示”(后期动画)时,通过监听bootstrap的collapse
show.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);
});
})
根据评论,当然前面的代码片段不会在高度不超过我选择的最大高度时向上滚动到标题。(我已将其降低到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);
});
})
@makshh在点击“从70年代开始”时看到了图片,标题/标题向上,我们在视图区域中看不到。是的,这是我真正想要的东西,除了“从70年代开始”之外,它工作得非常完美。如果你再次阅读答案,你可能会找到适合你需要的东西。只需将
maxHeight
设置为您想要的任何高度。我已经更新了我的答案