onClick菜單w/Meny JS

Question

我想弄明白這個Meny JS菜單打開onClick而不是鼠標懸停的方法。我已經嘗試在js中註釋掉鼠標懸停功能，以允許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，然後使用jQuery click處理程序運行meny.open()：

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函數重寫。