javascript - Unexpected behavior with mouseup -
when click on menu, menu shows up, when pointer moved away menu, hides after 2-5 seconds.
i want menu toggle when clicked, , explicitly hide when click anywhere else on page, seen on this demo. this fiddle code follows:
$(document).ready(function() { $(".myaccount").click(function() { var x = $(this).attr('id'); if (x == 1) { $(".submenu").hide(); $(this).attr('id', '0'); } else { $(".submenu").show(); $(this).attr('id', '1'); } }); //mouseup textarea false $(".submenu").mouseup(function() { return false }); $(".myaccount").mouseup(function() { return false }); //textarea without editing. $(document).mouseup(function() { $(".submenu").hide(); $(".myaccount").attr('id', ''); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="myallmenu" style='margin: 50px'> <div class="mymenu"> <a class="myaccount"> <span>my settings</span> </a> <div class="submenu" style="display: none;"> <ul class="allmenulist"> <li> <a href="/default.aspx">dashboard</a> </li> <li> <a href="#profile">profile</a> </li> <li> <a href="#settings">settings</a> </li> <li> <a href="#feedback">send feedback</a> </li> <li> <a href="#signout">sign out</a> </li> </ul> </div> </div> </div>
check on fiddle . onclick hide/show menu working . have added not(".myaccount",".submenu") mouse event of document.
$(document).ready(function() { $(".myaccount").click(function () { var x = $(this).attr('id'); if (x == '1') { $(".submenu").hide(); $(this).attr('id', '0'); } else { $(".submenu").show(); $(this).attr('id', '1'); } }); //textarea without editing. $(document).not(".myaccount",".submenu").mouseup(function () { $(".submenu").hide(); $(".myaccount").attr('id', ''); }); });
Comments
Post a Comment