单击汉堡菜单时页面跳转

Question

我正在构建一个模板，可以在这里看到：http://www.alessandrosantese.com/aldemair-productions/

当您向下滚动并单击汉堡菜单以打开关闭-canvas 菜单（基础 6）时，页面会跳转。

这是我的 js 到目前为止：

$(document).foundation();

$(document).ready(function(){
    function carouselInit() {
        if($('.single-project').length > 4 && !$('.slick-initialized').length) {
            $('.single-item').slick({
                responsive: [
                    {
                      breakpoint: 1024,
                      settings: 'unslick'
                    }]
            });
        }
        else {
            console.log('4');
        }
    }

    $('.hamburger').on('click', function(){
        if($('header').hasClass('fixed')){
            $('header').removeClass('fixed').addClass('absolute');
            $(this).toggleClass('open');
        }
        else {
            $('header').removeClass('absolute').addClass('fixed');
            $(this).toggleClass('open');
        }
    });

    carouselInit();

    var resizeId;
    $(window).resize(function() {
        clearTimeout(resizeId);
        resizeId = setTimeout(carouselInit, 500);
    });

});

点击汉堡包图标时，所有页面不应跳转。

Answer 1

这是让页面跳转的代码：

 // Elements with [data-toggle] will toggle a plugin that supports it when clicked.
  $(document).on('click.zf.trigger', '[data-toggle]', function () {
    triggers($(this), 'toggle');
  });

当您点击汉堡包菜单时，它会在 ID 为 'sth' 的元素上触发 'toggle.zf.trigger'。这进一步进入了具有这段代码的 open 函数：

if (this.options.forceTop) {
     $('body').scrollTop(0);
 }

猜猜它是做什么的？ :) 我只能假设将 OffCanvas forceTop 选项设置为 false 将消除此行为。

单击汉堡菜单时页面跳转

Page jumps up when clicking on hamburger menu

javascript

jquery

zurb-foundation