javascript - Foundation 6 Canvas 外未关闭

Question

我有以下链接:http://www.alessandrosantese.com/test/aldemair-productions/

当您单击中间的跳过按钮时，您将转到下一张幻灯片，其中实现了 FOUNDATION 6 关闭 Canvas 。

我的标题包含用于切换 Canvas 外的按钮，位于 Canvas 外菜单之外，看起来像这样:

        <header class="fixed close">
            <div class="hamburger" data-toggle="sth">
                <button type="button">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
                <span class="menu">Menu</span>
            </div>
            <div class="logo">
                <h1>Aldemar</h1>
                <span>productions</span>
            </div>
            <span class="mail-icon float-right" data-open="contact-us">
            </span>
        </header>

我有以下js来关闭 Canvas 外菜单:

$('.hamburger').on('click', function(e){
    e.preventDefault();
    if($('header').hasClass('close')){
        $('header').removeClass('close').addClass('open');
        $(this).find('button').toggleClass('open');
        $('body').addClass('block-view');
    }
    else {
        $('.off-canvas').foundation('close');
        $('header').removeClass('open').addClass('close');
        $(this).find('button').toggleClass('open');
        $('body').removeClass('block-view');
        $('#sth').foundation('close');
    }
});

但这不起作用:$('#sth').foundation('close');它不会关闭菜单

Answer 1

看起来带有类 off-canvas-wrapper-inner 的 div 仍然具有类 is-off-canvas-open和 is-open-left 当菜单关闭并且标题滑回左侧时。尝试在 $('header').removeClass('open').addClass('close') 之后删除这些类。

或者，如果可以根据文档 ( http://foundation.zurb.com/sites/docs/off-canvas.html ) 设置 Foundation Canvas 外类，则您不需要编写自定义事件来切换菜单。