javascript - Wordpress Divi 主题 - Accordion 切换的 anchor 链接

Question

我正在尝试获取指向 Accordion 的 anchor 链接，然后打开切换开关。

我在谷歌上找到了一个代码片段，它可以工作，但并不完全有效。

当我位于 Accordion 所在的页面上时，单击 anchor 链接，它会正确滚动到 Accordion 并打开选项卡 --- 但是，它此时刷新页面并且不会停留在原处 Accordion 是。

如果我单击 Accordion 所在页面以外的其他页面上的 anchor 链接，它所做的只是将我定向到该页面 - 而不是 Accordion 。

任何帮助都会很棒。

网址是http://casafamilyserv.wpengine.com/resources/

anchor 链接是页面右上角的“捐款”按钮。

这是 JS 片段:

<script>
    jQuery(function($) {
    //accordion
    $('.menu-item-98 a').on('click', function(event){
        $('#my-accordion .et_pb_accordion_item_2 .et_pb_toggle_title').click();
        $("html, body").animate({ scrollTop: $('#my-accordion').offset().top }, 1000);
    });
});

</script>

anchor 链接用于打开“贡献/捐赠” Accordion 选项卡。

Answer 1

只需添加return false;。

$('.menu-item-98 a').on('click', function(event){
    // sometimes you may also need to add
    // event.preventDefault();

    donateScroll();

    return false;
});

发生这种情况是因为您的捐赠按钮的网址中有一个 #donate。

<a href="/resources#donate">Make A Donation</a>

默认情况下，浏览器会尝试在页面上的某个位置查找 id="donate" 并跳转到该位置。添加 return false; 会阻止默认行为并允许您的 js 完全控制点击事件。

您还可以添加一些内容来检查从不同页面到达时是否存在现有哈希:

function donateScroll(){
    $('#my-accordion .et_pb_accordion_item_2 .et_pb_toggle_title').click();
    $("html, body").animate({ scrollTop: $('#my-accordion').offset().top }, 1000);
}

if(window.location.hash == '#donate') {
    donateScroll();
}

您还可以将其移动到可重用的函数中，而不是重复滚动和单击逻辑。