我正在制作一个 Accordion ,一切正常,问题是每个元素的内容都很大,我无法使元素在标题顶部滚动以从单击的元素顶部开始阅读,我正在尝试使用 jQuery animate
但不起作用。
HTML
<dl class="FrecuentlyAsked">
<dt>
<h1 data-accordian-title="#accordian-1">Title</h1>
</dt>
<dd id="accordian-1">
Content goes here
</dd>
<dt>
<h1 data-accordian-title="#accordian-2">Title 2</h1>
</dt>
<dd id="accordian-2">
Content goes here
</dd>
<dl>
这是我的代码:
// Accordian
function closeAccordion() {
$('.FrecuentlyAsked dt h1').removeClass('active');
$('.FrecuentlyAsked dd').slideUp(300);
}
$('.FrecuentlyAsked dt h1').click( function() {
var currentVal = $(this).attr('data-accordian-title');
if ($(this.target).is('.active')) {
closeAccordion();
} else {
closeAccordion();
$(this).addClass('active');
$('.FrecuentlyAsked ' + currentVal).slideDown(300);
$('html,body').animate({scrollTop: $(this).offset().top}, 800);
}
});
JS fiddle Here
希望大家能帮帮我 问候!
最佳答案
使用下面的代码更新您的 closeAccordion() 方法,它将正常工作
function closeAccordion() {
$('.FrecuentlyAsked dt h1').removeClass('active');
$('.FrecuentlyAsked dd').slideUp(0);
}
关于javascript - 滚动到元素顶部单击 Accordion jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33931885/