用於多級下拉菜單的Jquery代碼

我是JQuery的新手，嘗試編寫JQuery代碼來創建多級下拉菜單。該HTML看起來象下面這樣：

<ul id="menu"> 
    <li><a href="#">Link 1</a> 
     <ul class="submenu"> 
     <li><a href="#">Sub Link 1.1</a> 
      <ul class="submenu"> 
       <li><a href="#"> Sub Link 1.1.1</a></li> 
       <li><a href="#"> Sub Link 1.1.2</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Sub Link 1.2</a></li> 
     <li><a href="#">Sub Link 1.3</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Link 2</a> 
     <ul class="submenu"> 
     <li><a href="#">Sub Link 2.1</a> 
      <ul class="submenu"> 
       <li><a href="#"> Sub Link 2.1.1</a></li> 
       <li><a href="#"> Sub Link 2.1.2</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Sub Link 2.2</a></li> 
     </ul> 
    </li> 
</ul>

jQuery代碼我走到這一步，是爲下，但它沒有打開和關閉submenus.How我可以使它工作嗎？

$(document).ready(function() { 
    $('#ul.menu > li').hover(function() { $('ul:first', this).show(); }, 
          function() { $('ul:first', this).hide(); } 
    ); 
    $('#ul.menu li li').hover(function() { 
     $('ul:first', this).each(function() { 
      var p = $(this).parent(); 
      $(this).css('top', p.position().top) 
        .css('left', p.position().left + p.width()) 
        .show(); 
     });}, 
     function() { $('ul:first', this).hide(); } 
    ); 
});

來源

2011-07-08 Jake

小雞出來：http://jsfiddle.net/g5xSX/，也許它是e xactly你想要什麼

來源

2011-07-08 10:55:30

這似乎工作非常好..但是，我想介紹一個子菜單項或菜單隱藏之前1秒的延遲。我怎麼做？ – Jake

您可以添加一個數字參數來隱藏每個函數，比如hide（1000），它會指定隱藏效果的持續時間並使其平滑 –

它正在添加延遲，但並不完全以可用的方式。我想添加類似於此鏈接中菜單功能的延遲..這可能嗎？ http://javascript-array.com/scripts/multi_level_drop_down_menu/?st – Jake

我創造了這個小提琴，這只是一個開端，但它的一些它的工作http://jsfiddle.net/mZzqu/2/

我簡化您的標記（附上點擊處理程序，以「禮」，它的更好）

<ul id="menu"> 
    <li>Link 1 
     <ul class="submenu"> 
     <li>Sub Link 1.1 
      <ul class="submenu"> 
       <li id='1'> Sub Link 1.1.1</li> 
       <li>Sub Link 1.1.2</li> 
      </ul> 
     </li> 
     <li>Sub Link 1.2</li> 
     <li>Sub Link 1.3</li> 
     </ul> 
    </li> 
    <li>Link 2 
     <ul class="submenu"> 
     <li>Sub Link 2.1 
      <ul class="submenu"> 
       <li> Sub Link 2.1.1</li> 
       <li> Sub Link 2.1.2</li> 
      </ul> 
     </li> 
     <li>Sub Link 2.2</li> 
     </ul> 
    </li> 
</ul>

jquery代碼

$.fn.dropdown = function (options) { 
    var settings = jQuery.extend({ 
    timeout: 0.2 
    }, options); 
    var closetimer = null; 
    var ddmenuitem = null; 
    $(this).children('li').each(function(){ 
     $(this).find('ul').hide(); 
    }); 
    $(this).find('li').hover(dropdown_open, dropdown_close); 
    document.onclick = dropdown_close; 

    function dropdown_open(event) 
    { 
    dropdown_canceltimer(); 
    //dropdown_close(); 
    ddmenuitem = $(event.target).children('ul').css('display', 'block'); 
    } 

    function dropdown_close(event) { 
     $(event.target).parent('ul:not(#menu)').hide(); 
    } 

    function dropdown_timer() { 
    closetimer = window.setTimeout(dropdown_close, settings.timeout * 1000); 
    } 

    function dropdown_canceltimer() { 
    if (closetimer) { 
     window.clearTimeout(closetimer); 
     closetimer = null; 
    } 
    } 

    return this; 
}

來源

2011-07-08 10:48:18

用於多級下拉菜單的Jquery代碼

回答

相關問題