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