javascript - onClick 菜单 w/Meny JS

Question

我正在尝试找出一种方法来打开这个 Meny JS 菜单 onClick 而不是鼠标悬停。我试过在 js 中注释掉 mouseover 函数以允许 mousedown 和 mouseup 优先，但它只是完全杀死了该功能。非常感谢你们能提供的任何帮助/见解。

JSFiddle

MenyJS

我确定解决方案就在这一部分 - 见下文:

        /**
         * The contents element which gets pushed aside while
         * Meny is open.
         */
        function setupContents() {
            // Shorthand
            var style = dom.contents.style;

            originalStyles.contents = style.cssText;

            if( supports3DTransforms ) {
                style[ Meny.prefix( 'transform' ) ] = contentsTransformClosed;
                style[ Meny.prefix( 'transformOrigin' ) ] = contentsTransformOrigin;
                style[ Meny.prefix( 'transition' ) ] = 'all ' + config.transitionDuration +' '+ config.transitionEasing;
            }
            else {
                style.position = style.position.match( /relative|absolute|fixed/gi ) ? style.position : 'relative';
                Meny.extend( style, contentsStyleClosed );
            }
        }

        /**
         * Attaches all input event listeners.
         */
        function bindEvents() {

            if( 'ontouchstart' in window ) {
                if( config.touch ) {
                    Meny.bindEvent( document, 'touchstart', onTouchStart );
                    Meny.bindEvent( document, 'touchend', onTouchEnd );
                }
                else {
                    Meny.unbindEvent( document, 'touchstart', onTouchStart );
                    Meny.unbindEvent( document, 'touchend', onTouchEnd );
                }
            }

            if( config.mouse ) {
                Meny.bindEvent( document, 'mousedown', onMouseDown );
                Meny.bindEvent( document, 'mouseup', onMouseUp );
                Meny.bindEvent( document, 'mousemove', onMouseMove );
            }
            else {
                Meny.unbindEvent( document, 'mousedown', onMouseDown );
                Meny.unbindEvent( document, 'mouseup', onMouseUp );
                Meny.unbindEvent( document, 'mousemove', onMouseMove );
            }
        }

        /**
         * Expands the menu.
         */
        function open() {
            if( !isOpen ) {
                isOpen = true;

                Meny.addClass( dom.wrapper, 'meny-active' );

                dom.cover.style.height = dom.contents.scrollHeight + 'px';
                dom.cover.style.visibility = 'visible';

                // Use transforms and transitions if available...
                if( supports3DTransforms ) {
                    // 'webkitAnimationEnd oanimationend msAnimationEnd animationend transitionend'
                    Meny.bindEventOnce( dom.wrapper, 'transitionend', function() {
                        Meny.dispatchEvent( dom.menu, 'opened' );
                    } );

                    dom.cover.style.opacity = 1;

                    dom.contents.style[ Meny.prefix( 'transform' ) ] = contentsTransformOpened;
                    dom.menu.style[ Meny.prefix( 'transform' ) ] = menuTransformOpened;
                }
                // ...fall back on JS animation
                else {
                    menuAnimation && menuAnimation.stop();
                    menuAnimation = Meny.animate( dom.menu, menuStyleOpened, 500 );
                    contentsAnimation && contentsAnimation.stop();
                    contentsAnimation = Meny.animate( dom.contents, contentsStyleOpened, 500 );
                    coverAnimation && coverAnimation.stop();
                    coverAnimation = Meny.animate( dom.cover, { opacity: 1 }, 500 );
                }

                Meny.dispatchEvent( dom.menu, 'open' );
            }
        }

        /**
         * Collapses the menu.
         */
        function close() {
            if( isOpen ) {
                isOpen = false;

                Meny.removeClass( dom.wrapper, 'meny-active' );

                // Use transforms and transitions if available...
                if( supports3DTransforms ) {
                    // 'webkitAnimationEnd oanimationend msAnimationEnd animationend transitionend'
                    Meny.bindEventOnce( dom.wrapper, 'transitionend', function() {
                        Meny.dispatchEvent( dom.menu, 'closed' );
                    } );

                    dom.cover.style.visibility = 'hidden';
                    dom.cover.style.opacity = 0;

                    dom.contents.style[ Meny.prefix( 'transform' ) ] = contentsTransformClosed;
                    dom.menu.style[ Meny.prefix( 'transform' ) ] = menuTransformClosed;
                }
                // ...fall back on JS animation
                else {
                    menuAnimation && menuAnimation.stop();
                    menuAnimation = Meny.animate( dom.menu, menuStyleClosed, 500 );
                    contentsAnimation && contentsAnimation.stop();
                    contentsAnimation = Meny.animate( dom.contents, contentsStyleClosed, 500 );
                    coverAnimation && coverAnimation.stop();
                    coverAnimation = Meny.animate( dom.cover, { opacity: 0 }, 500, function() {
                        dom.cover.style.visibility = 'hidden';
                        Meny.dispatchEvent( dom.menu, 'closed' );
                    } );
                }
                Meny.dispatchEvent( dom.menu, 'close' );
            }
        }

        /**
         * Unbinds Meny and resets the DOM to the state it
         * was at before Meny was initialized.
         */
        function destroy() {
            dom.wrapper.style.cssText = originalStyles.wrapper
            dom.menu.style.cssText = originalStyles.menu;
            dom.contents.style.cssText = originalStyles.contents;

            if( dom.cover && dom.cover.parentNode ) {
                dom.cover.parentNode.removeChild( dom.cover );
            }

            Meny.unbindEvent( document, 'touchstart', onTouchStart );
            Meny.unbindEvent( document, 'touchend', onTouchEnd );
            Meny.unbindEvent( document, 'mousedown', onMouseDown );
            Meny.unbindEvent( document, 'mouseup', onMouseUp );
            Meny.unbindEvent( document, 'mousemove', onMouseMove );

            for( var i in addedEventListeners ) {
                this.removeEventListener( addedEventListeners[i][0], addedEventListeners[i][3] );
            }

            addedEventListeners = [];
        }


        /// INPUT: /////////////////////////////////

        function onMouseDown( event ) {
            isMouseDown = true;
        }

        function onMouseMove( event ) {
            // Prevent opening/closing when mouse is down since
            // the user may be selecting text
            if( !isMouseDown ) {
                var x = event.clientX - indentX,
                    y = event.clientY - indentY;

                switch( config.position ) {
                    case POSITION_T:
                        if( y > config.height ) {
                            close();
                        }
                        else if( y < config.threshold ) {
                            open();
                        }
                        break;

                    case POSITION_R:
                        var w = dom.wrapper.offsetWidth;
                        if( x < w - config.width ) {
                            close();
                        }
                        else if( x > w - config.threshold ) {
                            open();
                        }
                        break;

                    case POSITION_B:
                        var h = dom.wrapper.offsetHeight;
                        if( y < h - config.height ) {
                            close();
                        }
                        else if( y > h - config.threshold ) {
                            open();
                        }
                        break;

                    case POSITION_L:
                        if( x > config.width ) {
                            close();
                        }
                        else if( x < config.threshold ) {
                            open();
                        }
                        break;
                }
            }
        }

        function onMouseUp( event ) {
            isMouseDown = false;
        }

Answer 1

一个解决方案是将threshold参数设置为0，将mouse设置为false，然后使用用于运行 meny.open() 的 jQuery click 处理程序:

var meny = Meny.create({
    ...
    threshold: 0,
    mouse: false
});

$(".meny-arrow").click(function(){
    meny.open();
});

$(".meny").click(function(){
    meny.close();
});

$(".contents").click(function(){
    meny.close();
});

Example.

注意:在我将 Meny.js 代码内联到所有内容之前，这对我不起作用。当我从外部链接到它时，它不起作用。因此，我建议直接在脚本中修改 threshold 和 mouse 参数，而不是使用 create 函数覆盖 then。