如何使MDL菜單在點擊後保持打開狀態？

Question

我需要在MDL菜單中放置一個輸入。問題是當我點擊輸入或菜單中的任何東西時，它會關閉菜單。這怎麼能工作？

這是一個問題的例子。

<button id="demo-menu-lower-right" 
      class="mdl-button mdl-js-button mdl-button--icon"> 
     <i class="material-icons">more_vert</i> 
    </button> 

    <div class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" 
     for="demo-menu-lower-right"> 
     <form action="#"> 
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
        <input class="mdl-textfield__input" type="text" id="sample3" /> 
       <label class="mdl-textfield__label" for="sample3">Text...</label> 
      </div> 
     </form> 
    </div> 

Answer 1

解決方案是隱藏和顯示div而不是使用內置菜單。這並不完美，因爲它沒有動畫，如果有人知道如何使菜單動畫工作，或知道如何使菜單工作，我會選擇該答案。

固定碼。

HTML

<button id="loginbntstoggle" 
     class="mdl-button mdl-js-button mdl-button--icon"> 
    <i class="material-icons">more_vert</i> 
</button> 

<div id="loginbnts"> 
    <form action="#"> 
     <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
       <input class="mdl-textfield__input" type="text" id="sample3" /> 
      <label class="mdl-textfield__label" for="sample3">Text...</label> 
     </div> 
    </form> 
</div> 

的JavaScript

'click #loginbntstoggle' : function(e){ 
     if(document.getElementById("loginbnts").style.display=="none"){ 
      document.getElementById("loginbnts").style.display = "block"; 
     }else{ 
      document.getElementById("loginbnts").style.display = "none"; 
     } 
    } 

CSS

#loginbnts{display:none;}