Best IT Recipes

Strange behavior of a dropdown menu created by jquery

For my personal use, I am developing a small drop down menu with HTML, CSS and jquery. When I run the script, then the menu comes and goes. There is some minor mistake that I cannot understand. Here is my code. Can someone take a look and tell me how to fix this.

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> a#plinkp { background: #CCC; padding: 10px; cursor: pointer; margin-left: 600px; margin-top: 200px; position: absolute; } a#testll { background: #CCC; padding: 10px; cursor: pointer; margin-left: 600px; margin-top: 250px; position: absolute; } div#HoverSubmenu { background: #fff; position: absolute; top: -12px; left: -20px; z-index: 100; width: 165px; display: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); border:5px solid; border-color:#F1F2F2; z-index:9999; } div#HoverSubmenu li a { color: #555555; display: block; font-family: arial; font-weight: bold; padding: 6px 15px; cursor: pointer; text-decoration: none; } div#HoverSubmenu li a:hover { background: #39B54A; color: #FFFFFF; text-decoration: none; } .HoverRoot { list-style: none; margin: 0px; padding: 0px; padding: 11px 0 0 0px; border-top: 1px solid #dedede; } </style> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $('[id*=link]').click(function () { //$("#link").click(function () { $('#HoverSubmenu').insertAfter($('[id*=link]')); $('#HoverSubmenu').css({ left: $(this).offset().left + 'px', top: ($(this).offset().top + $(this).outerHeight()) + 'px', position: "absolute" }); toggleVisibility(); false; }); $("html").click( function (e) { if ($(e.target).not("[id*='link']") && e.target.id != "HoverSubmenu" && e.target.className != "HoverRoot" && e.target.className != "HoverLI" && e.target.className != "atag") { //alert(e.target.id); $('div#HoverSubmenu').fadeOut(); } }); function toggleVisibility() { var submenu = $('div#HoverSubmenu'); if (submenu.is(":visible")) { submenu.fadeOut(); } else { submenu.fadeIn(); } } }); </script> </head> <body> <form id="form1" runat="server"> <a id="plinkp">About</a> <a id="testll">My Test</a> <%--Hover UPS Menu start--%> <div id="HoverSubmenu"> <ul class="HoverRoot"> <li class="HoverLI"><a class="atag" href="http://www.bba-reman.com">Ship with UPS</a></li> <li class="HoverLI"><a class="atag" href="http://www.bba-reman.com">Ship with FedEx</a></li> </ul> </div> <%--Hover UPS Menu end--%> </form> </body> </html>
0
jquery
Mar 26 '13 at 10:55
source share
1 answer

Try changing this line at the end of the click handler '[id*=link]' :

 false;

... be

 return false;

Demo: http://jsfiddle.net/nnnnnn/tdq3d/

Perhaps, as you did, it was a typo that you left in the return part? Anyway, with return false; it prevents the click event from propagating through the DOM, which means that it does not reach the click handler bound to the 'html' . Without return false; the click will spread upward, and then the second click handler hides the pop-up menu.

Also in the 'html' click handler, the if test does not do what you probably think. First part:

  if ($(e.target).not("[id*='link']") && // etc

... will always be true, because the .not() method does not return a boolean, it returns a jQuery object (and any object is true). You can check if .not() returned an empty jQuery object by testing the object length property (zero length will be false):

  if ($(e.target).not("[id*='link']").length && // etc

I think this will also fix your problem as shown here: http://jsfiddle.net/nnnnnn/RAGNJ/3/

+1
Mar 26 '13 at 11:04 on
source share


More articles:


All Articles