Javascript Dropdown Menu Toggle Onclick

Question

Ok so i am using the following jquery dropdown menu. I found this code online and it works fine. All i want to change is the open/close functionality. Right now it is mouseover mouseout to show and hide the menus. I want to change it so that that the menus are displayed "onclick." So when the user clicks the menu it opens and stays open. Then when they select a link from the dropdown it closes. Also i need it to close if they click somewhere else on the page. I think this is acheived by using the "toggle" event but i have been trying for hours to get it to work and have not been successful. can anyone help? 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 have tried playing with the last 4 lines of the above js changing the mouseover to onclick and also have tried some variations of toggle but haven't been able to get it to work. Thank you 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

Might be very late on this - But, I have a solution!

I had a requirement similar to the one you have had. I wrote a simple jQuery snippet to get Drop down menu when I click on the Parent menu. Once you click on any of the parent menu - it will show its own sub level in the drop down.

When you click on any other Parent - the previous Drop down will disappear and the new Drop down will appear.

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

It is a bit static type - but much useful. Any questions - please feel free to put it here!!

Thanks!

Stormstriker Sumesh

Answer 3

Links in the drop down menu do not work unless you bind a 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;