JavascriptドロップダウンメニューToggle 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; 

私はonclickのにマウスオーバーを変更する上記のjsの最後の4行で遊んで試してみましたトグルのバリエーションをいくつか試しましたが、動作させることができませんでした。何か助けてくれてありがとう。ここでは、このsolution(jsfiddle)

が変更されたコードである

Answer 1

チェック： - 私は解決策を持っている、しかし、

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

が非常に遅く、この上のかもしれません！

私はあなたが持っていたものと同様の要件を持っていました。私は、親メニューをクリックするとドロップダウンメニューを取得するためのシンプルな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;