javascript - Accordion Jquery 脚本问题

Question

我编写了 Accordion 脚本来部署在移动网站上，一切正常。但是，当页面长度增加时，我遇到了一个问题。

Accordion 大约有 8 到 10 个小节。当我向下滚动并单击任何项​​目栏以显示内容时，页面移动到顶部而不是停留在我单击的当前位置。

请告诉我解决方案。

下面是脚本

$('.acc_container').hide(); $('.acc_container1').hide();

$('.acc_trigger').click(函数(){ $(this).siblings('.acc_container1').slideUp('fast'); $(this).parent().siblings('div').children('.acc_container1').slideUp('fast'); $(this).parent().siblings('div').children('.acc_container').slideUp('fast'); $(this).next().siblings('.acc_container').slideDown('fast'); });

Answer 1

在显示内容的每个 Accordion 触发器上，我假设这些内容是 anchor 标记，您需要防止事件的默认行为。在 anchor 标签的情况下，它也带你到标签的 href 属性。如果 href 属性设置为 #，单击 anchor 标记将带您到页面顶部。所以，像这样的事情应该有效，在 jQuery 的 event 对象上调用 preventDefault()，假设 .acc_trigger 是所有 Accordion 触发器的选择器:

$(".acc_trigger").click(function(e) {
    $(this).siblings('.acc_container1').slideUp('fast');
    $(this).parent().siblings('div').children('.acc_container1').slideUp('fast');
    $(this).parent().siblings('div').children('.acc_container').slideUp('fast');
    $(this).next().siblings('.acc_container').slideDown('fast');
    e.preventDefault();
});