0

我是 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>
4

2 回答 2

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');
    }
});
于 2014-03-04T17:03:50.410 回答
0

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

您将需要类似的东西：

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

您不应该使用您发布的初始化。这只是文档中显示的一个示例，其中包含所有可能的选项（您删除的anchors和除外）。slidesColor

仅使用您需要的选项，并考虑文档中详细说明的每个选项的默认值。paddingTop: '3em',如果您根本不打算使用，那么拥有诸如此类的东西是没有意义的padding。

于 2014-03-04T18:09:05.387 回答