javascript - 在页面更改时初始化/取消初始化 jQuery 插件

Question

我正在使用两个 jQuery 插件 fullpage 和ferromenu。

fullpage 使得窗口可以滚动整个页面，而ferromenu 是一个可以展开和折叠的简洁的圆形菜单。

问题是，由于 fullpage 使我的整个网站成为一页，ferromenu 会显示在每一页上，所以我不想只用 $(document).ready 初始化它

这是我尝试过的，但我现在遇到的问题是，当页面远离网址时它不会消失

$(window).on('hashchange', function(e){

var pageURL = $(location).attr("href");

if (pageURL === "https://www.example.com/index.php#thirdPage") {
    $("#custom-nav").ferroMenu({
            position    : "center-center"
    });
};

});

Answer 1

您应该使用 fullPage.js 提供的回调，例如 onLeave 和 afterLoad:

$(document).ready(function () {
    $("#custom-nav").ferroMenu({
        position: "center-center"
    });

    $('#fullpage').fullpage({
        anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

        onLeave: function (index, nextIndex, direction) {
            //going to section 3 ?
            if (nextIndex == 3) {
                $('.ferromenu-controller').show();
            } else {
                $('.ferromenu-controller').hide();
            }

        }
    });
});

或者甚至使用 fullpage.js 添加到正文的 css3 类，如 this tutorial 中详述。 .