0

在有人在下拉菜单中进行选择后,我试图关闭我的下拉菜单。这是我的水平下拉菜单的 Javascript 代码。

;( function( window ) {

    'use strict';

    var document = window.document;

    function extend( a, b ) {
        for( var key in b ) { 
            if( b.hasOwnProperty( key ) ) {
                a[key] = b[key];
            }
        }
        return a;
    }

    function cbpHorizontalSlideOutMenu( el, options ) { 
        this.el = el;
        this.options = extend( this.defaults, options );
        this._init();
    }

    cbpHorizontalSlideOutMenu.prototype = {
        defaults : {},
        _init : function() {
            this.current = -1;
            this.touch = Modernizr.touch;
            this.menu = this.el.querySelector( '.cbp-hsmenu' );
            this.menuItems = this.el.querySelectorAll( '.cbp-hsmenu > li' );
            this.menuBg = document.createElement( 'div' );
            this.menuBg.className = 'cbp-hsmenubg';
            this.el.appendChild( this.menuBg );
            this._initEvents();
        },
        _openMenu : function( el, ev ) {

            var self = this,
                item = el.parentNode,
                items = Array.prototype.slice.call( this.menuItems ),
                submenu = item.querySelector( '.cbp-hssubmenu' ),
                closeCurrent = function( current ) {
                    var current = current || self.menuItems[ self.current ];
                    current.className = '';
                    current.setAttribute( 'data-open', '' );    
                },
                closePanel = function() {
                    self.current = -1;
                    self.menuBg.style.height = '0px';
                };

            if( submenu ) {

                ev.preventDefault();

                if( item.getAttribute( 'data-open' ) === 'open' ) {
                    closeCurrent( item );
                    closePanel();
                }
                else {
                    item.setAttribute( 'data-open', 'open' );
                    if( self.current !== -1 ) {
                        closeCurrent();
                        closePanel();
                    }
                    self.current = items.indexOf( item );
                    item.className = 'cbp-hsitem-open';
                    self.menuBg.style.height = submenu.offsetHeight + 'px';
                }
            }
            else {
                if( self.current !== -1 ) {
                    closeCurrent();
                    closePanel();
                }
            }

        },
        _initEvents : function() {

            var self = this;

            Array.prototype.slice.call( this.menuItems ).forEach( function( el, i ) {
                var trigger = el.querySelector( 'a' );
                if( self.touch ) {
                    trigger.addEventListener( 'touchstart', function( ev ) { self._closeMenu( this, ev ); } );
                }
                else {
                    trigger.addEventListener( 'click', function( ev ) { self._closeMenu( this, ev ); } );   
                }
            } );

            window.addEventListener( 'resize', function( ev ) { self._resizeHandler(); } );

        },
        // taken from https://github.com/desandro/vanilla-masonry/blob/master/masonry.js by David DeSandro
        // original debounce by John Hann
        // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
        _resizeHandler : function() {
            var self = this;
            function delayed() {
                self._resize();
                self._resizeTimeout = null;
            }

            if ( this._resizeTimeout ) {
                clearTimeout( this._resizeTimeout );
            }

            this._resizeTimeout = setTimeout( delayed, 50 );
        },
        _resize : function() {
            if( this.current !== -1 ) {
                this.menuBg.style.height = this.menuItems[ this.current ].querySelector( '.cbp-hssubmenu' ).offsetHeight + 'px';
            }
        }
    }

    // add to global namespace
    window.cbpHorizontalSlideOutMenu = cbpHorizontalSlideOutMenu;

} )( window );

如果你能帮助我,那就太好了。

4

0 回答 0