如何使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;}