javascript - how to make dropdown menu using html & css -
i'm trying create html menu holding login form, when expand menu, login form appears, problem when click on form write username or password, menu collapses automatically , login form disappears before write inside it
here image of menu , form in it.
<body> <div class="wrapper-demo"> <div id="dd" class="wrapper-dropdown-3" tabindex="1"> <span>login</span> <ul class="dropdown"> <li> username<input type="text" id="un"><br/> password<input type="text" id="pass"><br/> <input type="submit" id="login" value="login"> </li> </ul> </div></div> </div> <!-- jquery if needed --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> function wtf() { window.location.href = ""; } function dropdown(el) { this.dd = el; this.placeholder = this.dd.children('span'); this.opts = this.dd.find('ul.dropdown > li'); this.val = ''; this.index = -1; this.initevents(); } dropdown.prototype = { initevents: function () { var obj = this; obj.dd.on('click', function (event) { $(this).toggleclass('active'); return false; }); } } $(function () { var dd = new dropdown($('#dd')); $(document).click(function () { // dropdowns $('.wrapper-dropdown-3').removeclass('active'); }); }); </script> </body>
issue have click event on wrapper on document click on input fields or surrounding area executes click on wrapper , toggles state according logic. click on elements inside bubbles parent , toggles state, why collapses when click on input field or other fields inside dropdown. 1 quick way identify place event coming , if dropdown triggers handle else leave it.
fiddle
html mark change:- added class called dd both identify place of actual trigger.
<div id="dd" class="wrapper-dropdown-3 dd" tabindex="1"> <span class="dd">login</span> script
dropdown.prototype = { initevents: function () { var obj = this; obj.dd.on('click', function (event) { event.stoppropagation(); //stop propagation if (event.target.classname === 'dd') { //check specfic targets $(this).toggleclass('active'); } return false; }); } } if change html structure move .dropdown out of same wrapper trigger issue won't happen.
Comments
Post a Comment