Wordpress Divi 主题 - 手风琴的锚链接切换

Question

我正在尝试获取指向手风琴的锚链接，然后打开切换开关。

我在 google 上找到了一个代码 sn-p 可以工作，但不完全。

当我在手风琴所在的页面上并单击锚链接时，它会正确滚动到手风琴并打开选项卡 --- 但是，它此时会刷新页面并且不会停留在手风琴是。

如果我点击手风琴所在页面以外的另一个页面的锚链接，它所做的只是将我引导到该页面——而不是手风琴。

任何帮助都会很棒。

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

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

这里是 JS sn-p:

<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>

锚链接是打开“贡献/捐赠”手风琴选项卡。

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();
}

除了重复滚动和点击逻辑之外，您还可以将其移动到可重复使用的函数中。