Question

我做手风琴，一切正常，事情是每个元素的内容都很大，我不能让元素滚动到标题的顶部以开始阅读顶部单击了该元素，我尝试使用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小提琴 Here

希望你们能帮助我此致！

Answer 1

使用下面的代码更新您的closeAccordion（）方法，它将正常工作

function closeAccordion() {
   $('.FrecuentlyAsked dt h1').removeClass('active');
   $('.FrecuentlyAsked dd').slideUp(0);
}

Answer 2

使用下面的代码 $（＆＃39; .FrecuentlyAsked dd＆＃39;）。slideUp（0）;

Answer 3

您只需编辑此行：

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

这是demo

Answer 4

我得到了修复程序，请尝试FIDDLE，

导致问题的延迟太多了。

$('.FrecuentlyAsked dt h1').click(function () {
        var $this = $(this); // caching object
        var currentVal = $(this).attr('data-accordian-title');

        if ($(this.target).is('.active')) {
            closeAccordion();
        } else {
            closeAccordion();

                $(this).addClass('active');
                $('.FrecuentlyAsked  ' + currentVal).slideDown(300);
            setTimeout(function () {
                $('html,body').animate({scrollTop: $this.offset().top}, 800);


            }, 400);



        }
    });

希望这会有所帮助..

滚动到元素的顶部单击手风琴jQuery

4 个答案: