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