基礎6畫布不關閉

Question

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

當您單擊中間的跳過按鈕時，您將進入下一張幻燈片，其中實現了FOundation 6 off畫布。

我的標題包括切換畫布外的按鈕，它位於非畫布菜單之外，它看起來像：

        <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'）; 它沒有關閉菜單

Answer 1

它看起來像div與類off-canvas-wrapper-inner仍然具有類is-off-canvas-open和is-open-left當菜單被關閉，頭部滑回左側。 嘗試在$('header').removeClass('open').addClass('close')之后刪除這些類$('header').removeClass('open').addClass('close') 。

或者，如果可以根據文檔（ http://foundation.zurb.com/sites/docs/off-canvas.html ）設置Foundation off-canvas類，則不需要編寫自定義事件切換菜單。

Answer 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');
    }
});

我不得不手動打開和關閉菜單