javascript - How can a MDL menu be made to stay open after clicking in it? -
i need place input in mdl menu. problem when click input or in menu closes menu. how can made work?
this example of problem.
<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>
the solution hide , show div instead of using built in menu. not perfect not have animations if 1 knows how make menu animations work or knows how make menu work select answer.
the fixed code.
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;}
Comments
Post a Comment