Javascript Toggle Onclick Dropdown

Question

Ok, so I use the following jquery dropdown menu. I found this code online and it works great. All I want to change is open / closed functionality. Right now, show and hide the mouse with the mouse. I want to change it so that the menu displays "onclick". Therefore, when the user clicks on the menu, it opens and remains open. Then, when they select a link from the drop-down list, it closes. I also need it to close if they click somewhere else on the page. I think this is achieved using the "switch" event, but for many hours I tried to get it to work and was not successful. can anyone help? The code is below.

Html:

<ul id="jsddm"> <li><a href="#">JavaScript</a> <ul> <li><a href="#">Drop Down Menu</a></li> <li><a href="#">jQuery Plugin</a></li> <li><a href="#">Ajax Navigation</a></li> </ul> </li> <li><a href="#">Effect</a> <ul> <li><a href="#">Slide Effect</a></li> <li><a href="#">Fade Effect</a></li> <li><a href="#">Opacity Mode</a></li> <li><a href="#">Drop Shadow</a></li> <li><a href="#">Semitransparent</a></li> </ul> </li> <li><a href="#">Navigation</a></li> <li><a href="#">HTML/CSS</a></li> <li><a href="#">Help</a></li> </ul> 

CSS

 #jsddm { margin: 0; padding: 0} #jsddm li { float: left; list-style: none; font: 12px Tahoma, Arial} #jsddm li a { display: block; background: #20548E; padding: 5px 12px; text-decoration: none; border-right: 1px solid white; width: 70px; color: #EAFFED; white-space: nowrap} #jsddm li a:hover { background: #1A4473} #jsddm li ul { margin: 0; padding: 0; position: absolute; visibility: hidden; border-top: 1px solid white} #jsddm li ul li { float: none; display: inline} #jsddm li ul li a { width: auto; background: #9F1B1B} #jsddm li ul li a:hover { background: #7F1616} 

JavaScript:

 var timeout = 500; var closetimer = 0; var ddmenuitem = 0; function jsddm_open() { jsddm_canceltimer(); jsddm_close(); ddmenuitem = $(this).find('ul').css('visibility', 'visible');} function jsddm_close() { if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');} function jsddm_timer() { closetimer = window.setTimeout(jsddm_close, timeout);} function jsddm_canceltimer() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null;}} $(document).ready(function() { $('#jsddm > li').bind('mouseover', jsddm_open) $('#jsddm > li').bind('mouseout', jsddm_timer)}); document.onclick = jsddm_close; 

I tried playing with the last 4 lines of the above js, changing the mouse over to onclick, and also tried some switching options, but couldn't get it working. Thanks for any help.

Answer 1

check this solution (jsfiddle)

Here is the modified code:

 var timeout = 500; var closetimer = 0; var ddmenuitem = 0; function jsddm_open(event) { jsddm_canceltimer(); jsddm_close(); var submenu = $(this).find('ul'); if(submenu){ ddmenuitem = submenu.css('visibility', 'visible'); return false; } return true; } function jsddm_close() { if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');} function jsddm_timer() { closetimer = window.setTimeout(jsddm_close, timeout);} function jsddm_canceltimer() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null;}} $(document).ready(function() { $('#jsddm li').bind('click', jsddm_open); $('#jsddm > li').bind('mouseout', jsddm_timer); $('#jsddm > li').bind('mouseover', jsddm_canceltimer); }); document.onclick = jsddm_close; 

Answer 2

It may be very late, but I have a solution!

I had a requirement similar to the one you had. I wrote a simple jQuery snippet to get a drop down menu when I click on the parent menu. When you click on any of the parent menus, your additional level will be displayed in the drop-down list.

When you click on another parent, the previous Drop down will disappear and a new Drop down will appear.

I have this tutorial here: http://pepfry.com/tutorials/show-dropdown-menu-on-click-using-jquery

This is a bit static type, but very useful. Any questions - feel free, please, here!

Thanks!

Stormtrooper Sumesh

Answer 3

Links in the drop-down menu do not work unless you bind the click function:

 var ddmenuitem = 0; function jsddm_open(event) { jsddm_close(); var submenu = $(this).find('ul'); if(submenu){ ddmenuitem = submenu.css('visibility', 'visible'); return false; } return true; } function jsddm_close() { if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');} function jsddm_link_fix() { window.location.replace($(this).attr("href")); } $(document).ready(function() { $('#jsddm li').bind('click', jsddm_open); $('#jsddm li ul li a').bind('click', jsddm_link_fix); // fixes drop down links }); document.onclick = jsddm_close;