Question

我是Javascript的初学者，我的网站存在一些问题...... 我正在使用fullPage.js脚本和另一个脚本用于带有隐藏子菜单的垂直菜单。我的导航菜单脚本无法使用fullPage.js。看起来不错，但我的主播不再起作用了。

我可能在某处犯了一个错误，但我无法找到。

$(document).ready(function () {
    $.fn.fullpage({
        verticalCentered: false,
        resize: true,
        scrollingSpeed: 750,
        easing: 'easeInQuad',
        navigation: false,
        navigationPosition: 'left',
        navigationTooltips: ['firstSlide', 'secondSlide'],
        slidesNavigation: true,
        slidesNavPosition: 'bottom',
        loopBottom: false,
        loopTop: true,
        loopHorizontal: false,
        autoScrolling: true,
        scrollOverflow: false,
        css3: false,
        paddingTop: '3em',
        paddingBottom: '10px',
        normalScrollElements: '#element1, .element2',
        keyboardScrolling: true,
        touchSensitivity: 5,
        continuousVertical: false,
        animateAnchor: true,
        //events
        onLeave: function (index, direction) {},
        afterLoad: function (anchorLink, index) {},
        afterRender: function () {},
        afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) {},
        onSlideLeave: function (anchorLink, index, slideIndex, direction) {}
    });
});

$(function () {
    var menu_ul = $('.menu > li > ul'),
        menu_a = $('.menu > li > a');
    menu_ul.hide();
    menu_a.click(function (e) {
        e.preventDefault();
        if (!$(this).hasClass('active')) {
            menu_a.removeClass('active');
            menu_ul.filter(':visible').slideUp('slow');
            $(this).addClass('active').next().stop(true, true).slideDown('slow');
        } else {
            $(this).removeClass('active');
            $(this).next().stop(true, true).slideUp('slow');
        }
    });
});

<div class="section" id="section0">
    <!-- SECTION HOME PAGE -->
    <h1>earth. home. destroyed.</h1>
    <div id="content">
        <ul class="menu">
            <li class="item0"><a href="#section0">home page</a></li>
            <li class="item1"><a>releases</a>
                <ul>
                    <li class="subitem"><a>discography</a></li>
                    <li class="subitem"><a>videos</a></li>
                    <li class="subitem"><a>remixes</a></li>
                </ul>

            <li class="item2"><a href="#section1">subscribe</a></li>
            <li class="item3"><a>follow</a>
                <ul>
                    <li class="subitem"><a target="_blank" href="http://www.facebook.com/">facebook</a></li>
                    <li class="subitem"><a target="_blank" href="http://www.twitter.com/">twitter</a></li>
                </ul>
            </li>
            <li class="item4"><a href="#section2">contact</a></li>
        </ul>
    </div>
</div>

Answer 1

因为您在锚定点击事件中使用了event.preventDefault（），这将限制页面重定向。删除那个，

menu_a.click(function (e) {
    if (!$(this).hasClass('active')) {
        menu_a.removeClass('active');
        menu_ul.filter(':visible').slideUp('slow');
        $(this).addClass('active').next().stop(true, true).slideDown('slow');
    } else {
        $(this).removeClass('active');
        $(this).next().stop(true, true).slideUp('slow');
    }
});

Answer 2

问题是你没有在你的fullpage.js插件中使用锚点。您可能已删除该行。

您将需要以下内容：

$.fn.fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
    menu: '#myMenu'
});

您不应该使用您发布的初始化。这只是一个示例，on the documentation显示了所有可能的选项（除了您移除的anchors和slidesColor）。

仅使用您需要的选项，并考虑每个选项的详细at the documentation的默认值。如果您根本不打算使用paddingTop: '3em',，那么使用padding这样的内容是没有意义的。

锚不再起作用了

2 个答案: