MDL菜单如何在单击后保持打开状态?

时间:2015-08-31 00:11:50

标签: javascript jquery html html5 material-design-lite

我需要在MDL菜单中输入一个输入。问题是当我点击输入或菜单中的任何内容时它会关闭菜单。怎么能这样做?

这是问题的一个例子。

public void actionPerformed(ActionEvent ae)
{}

1 个答案:

答案 0 :(得分: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;}