我正在将此 Accordion 脚本用于常见问题解答页面:http://www.snyderplace.com/demos/accordion.html
除了一个在移动设备上尤为明显的问题外,它非常好。当您点击一个问题并且里面有很多内容时,它会向上扩展到屏幕外,您必须向上滚动才能看到问题和内容的开头。
理想情况下,当您单击它时,我希望将其放置在脚本将问题滚动到页面/视口(viewport)顶部的位置。如果有人知道要在脚本中调整什么,那就太棒了!
最佳答案
你可以尝试这样的事情。您不需要 Accordion 插件:
带图标的编辑版本,默认打开,并启用触摸滚动到顶部
https://jsfiddle.net/07fdq3t1/10/
将类(class)节目添加到您要打开的节目中。
由于有重复代码,这可能会更有效地编写,但它应该可以工作。
jQuery
$(document).ready(function() {
$('.accordion').click(function(){
if($(this).next('.container').is(':visible')) {
$(this).removeClass('show');
$(this).next('.container').slideUp();
}
else {
$('.accordion').find('.container:visible').slideUp();
$('.accordion').removeClass('show');
$(this).addClass('show');
$(this).next('.container').slideDown();
}
});
$('.accordion').on( "touchstart", function(){
if($(this).next('.container').is(':visible')) {
$(this).removeClass('show');
$(this).next('.container').slideUp();
}
else {
$('.accordion').find('.container:visible').slideUp();
$('.accordion').removeClass('show');
$(this).addClass('show');
$(this).next('.container').slideDown();
$('html, body').animate({
scrollTop: $(this).offset().top
}, 200);
}
});
});
HTML
<div class="accordion">Heading<span></span></div>
<div class="container">
<div class="content">
<div>Sample Content</div>
<p>Content here....</p>
</div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
<div class="content">
<div>Sample Content</div>
<p>Content here....</p>
</div>
</div>
<div class="accordion show">Heading<span></span></div>
<div class="container">
<div class="content">
<div>Sample Content</div>
<p>Content here....</p>
</div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
<div class="content">
<div>Sample Content</div>
<p>Content here....</p>
</div>
</div>
请注意,您需要在代码中包含 jQuery。
关于javascript - Jquery Accordion - 使点击的元素滚动到页面顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31032137/