Javascript 如何使MDL菜单在单击后保持打开状态?
我需要在MDL菜单中放置一个输入。问题是,当我点击输入或菜单中的任何内容时,它会关闭菜单。如何才能使其发挥作用 这就是问题的一个例子Javascript 如何使MDL菜单在单击后保持打开状态?,javascript,jquery,html,material-design-lite,Javascript,Jquery,Html,Material Design Lite,我需要在MDL菜单中放置一个输入。问题是,当我点击输入或菜单中的任何内容时,它会关闭菜单。如何才能使其发挥作用 这就是问题的一个例子 <button id="demo-menu-lower-right" class="mdl-button mdl-js-button mdl-button--icon"> <i class="material-icons">more_vert</i> </button>
<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>
更多
文本。。。
解决方案是隐藏并显示一个div,而不是使用内置菜单。这不是完美的,因为它没有动画,如果有人知道如何使菜单动画与它一起工作,或者知道如何使菜单为此工作,我将选择该答案
固定代码
HTML
CSS
<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>
'click #loginbntstoggle' : function(e){
if(document.getElementById("loginbnts").style.display=="none"){
document.getElementById("loginbnts").style.display = "block";
}else{
document.getElementById("loginbnts").style.display = "none";
}
}
#loginbnts{display:none;}