Javascript下拉菜單切換Onclick

Question

好吧，我使用下面的jquery下拉菜單。我發現這個代碼在線，它工作正常。我想改變的是打開/關閉功能。現在它是鼠標懸停鼠標來顯示和隱藏菜單。我想改變它，以便菜單顯示「onclick」。所以當用戶點擊菜單時，它會打開並保持打開狀態。然後，當他們從下拉菜單中選擇一個鏈接時，它會關閉。另外我需要它關閉，如果他們點擊頁面上的其他地方。我認爲這是通過使用「切換」事件來實現的，但我一直在嘗試幾個小時才能使其發揮作用並且沒有成功。誰能幫忙？代碼如下。

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; 

我曾嘗試用最後4行以上的JS打改變鼠標懸停到的onclick和也嘗試了一些切換的變化，但一直沒有能夠得到它的工作。感謝您的任何幫助。

Answer 1

檢查這個solution(jsfiddle)

下面是修改代碼：

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

可能是很晚 - 但，我有一個解決辦法！

我有一個類似於你的要求。當我點擊Parent菜單時，我寫了一個簡單的jQuery代碼片段來獲取下拉菜單。 一旦你點擊任何一個父菜單 - 它會在下拉菜單中顯示它自己的子級別。

當你點擊任何其他的父 - 上一個下拉將消失，新的下拉將出現。

我有一個教程在這裏：http://pepfry.com/tutorials/show-dropdown-menu-on-click-using-jquery

這是一個有點靜態類型 - 但很多有用的。任何問題 - 請隨意放在這裏！

謝謝！

Stormstriker Sumesh

Answer 3

鏈接的下拉菜單中不工作，除非你綁定點擊功能：

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;