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

        }
    });
});

甚至可以使用由this tutorial中详述的fullpage.js添加到正文中的css3类。

Answer 2

我不知道这是否是最好的方法，但是我找到了它创建的html对象的类，并且只更改了if语句的else部分中的display属性。

$(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"
    });
} else {
    $('.ferromenu-controller').css('display', 'none');
};

});

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

2 个答案: