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;