关闭全屏菜单叠加层。

Question

关闭全屏菜单叠加层。

3

我的全屏菜单叠加有一个关闭按钮，但我希望也可以通过点击叠加本身来关闭叠加。因此，如果您在叠加上的菜单外单击叠加，则叠加会关闭。与关闭按钮相同。以下是代码，但需要添加或编辑什么。

(function() {
    var triggerBttn = document.getElementById( 'trigger-overlay' ),
        overlay = document.querySelector( 'div.overlay' ),
        closeBttn = overlay.querySelector( 'button.overlay-close' );
        transEndEventNames = {
            'WebkitTransition': 'webkitTransitionEnd',
            'MozTransition': 'transitionend',
            'OTransition': 'oTransitionEnd',
            'msTransition': 'MSTransitionEnd',
            'transition': 'transitionend'
        },
        transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
        support = { transitions : Modernizr.csstransitions };

    function toggleOverlay() {
        if( classie.has( overlay, 'open' ) ) {
            classie.remove( overlay, 'open' );
            classie.add( overlay, 'close' );
            var onEndTransitionFn = function( ev ) {
                if( support.transitions ) {
                    if( ev.propertyName !== 'visibility' ) return;
                    this.removeEventListener( transEndEventName, onEndTransitionFn );
                }
                classie.remove( overlay, 'close' );
            };
            if( support.transitions ) {
                overlay.addEventListener( transEndEventName, onEndTransitionFn );
            }
            else {
                onEndTransitionFn();
            }
        }
        else if( !classie.has( overlay, 'close' ) ) {
            classie.add( overlay, 'open' );
        }
    }

    triggerBttn.addEventListener( 'click', toggleOverlay );
    closeBttn.addEventListener( 'click', toggleOverlay );
})();

- Moddersnuit

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Rouse · Answer 1

你所需做的就是在整个覆盖层 div 上添加一个“click”事件监听器。

overlay.addEventListener( 'click', toggleOverlay );

在底部

- LordNeo · Answer 2

closeBttn并没有被定义，因为根本就没有“button”（只有“a”标签）。

代码：

(function() {
var triggerBttn = document.getElementById( 'trigger-overlay' );
var overlay = document.querySelector( 'div.overlay' );
var closeBttn = document.querySelector( '#smp_menu' );
    transEndEventNames = {
        'WebkitTransition': 'webkitTransitionEnd',
        'MozTransition': 'transitionend',
        'OTransition': 'oTransitionEnd',
        'msTransition': 'MSTransitionEnd',
        'transition': 'transitionend'
    },
    transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
    support = { transitions : Modernizr.csstransitions };

function toggleOverlay() {
    if( classie.has( overlay, 'open' ) ) {
        classie.remove( overlay, 'open' );
        classie.add( overlay, 'close' );
        var onEndTransitionFn = function( ev ) {
            if( support.transitions ) {
                if( ev.propertyName !== 'visibility' ) return;
                this.removeEventListener( transEndEventName, onEndTransitionFn );
            }
            classie.remove( overlay, 'close' );
        };
        if( support.transitions ) {
            overlay.addEventListener( transEndEventName, onEndTransitionFn );
        }
        else {
            onEndTransitionFn();
        }
    }
    else if( !classie.has( overlay, 'close' ) ) {
        classie.add( overlay, 'open' );
    }
}

triggerBttn.addEventListener( 'click', toggleOverlay );
closeBttn.addEventListener( 'click', toggleOverlay);
})();

这将定义“closeBttn”（未使用）作为整个覆盖区域。

因此，在script.js中需要在当前代码正下方更改按钮类别时使用：

var otherthingy = document.querySelector('#smp_menu');
otherthingy.addEventListener('click', function (){
    button.classList.toggle('open');
});