Foundation 6 画布外未关闭答案

【问题标题】：Foundation 6 off-canvas not closingFoundation 6 画布外未关闭
【发布时间】：2016-05-17 17:20:16
【问题描述】：

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

当您单击中间的跳过按钮时，您将进入下一张幻灯片，该幻灯片实施了 FOundation 6 off 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来关闭画布外菜单：

$('.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');它不会关闭菜单

【问题讨论】：

你用的是什么版本？看起来你缺少应该是“sth”的元素 ID 属性。
id属性应该去哪里？版本 6 根据标题
Id #sth 属于用户将单击以关闭您的画布外的元素

标签： javascript zurb-foundation

【解决方案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 非画布类，则无需编写自定义事件来切换菜单。

【讨论】：

这似乎根本没有生效：$('.is-off-canvas-open').removeClass('is-off-canvas-open');

【解决方案2】：

所以在删除 "data-toggle="sth"" 之后，我更新了我的 js 如下：

$('.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');
        $('#sth').foundation('open');
    }
    else {
        $('.off-canvas').foundation('close');
        $('header').removeClass('open').addClass('close');
        $(this).find('button').toggleClass('open');
        $('body').removeClass('block-view');
        $('#sth').foundation('close');
    }
});

我不得不手动打开和关闭菜单

【讨论】：