如何創建一個具有下拉菜單的全長導航菜單

Question

我發現這個腳本很好用，直到你爲方程引入一個嵌套菜單爲止。 script

如何排除應用於嵌套菜單的腳本？有沒有辦法給嵌套菜單的類或ID，並從腳本中排除？

Answer 1

如果我正確理解你的問題，你可以添加一個類頂級菜單，並排除一切不是： HTML：

<ul class="menu"> 
    <li class="top-level">About Us</li> 
    <li class="top-level">Our Products</li> 
    <li class="top-level">FAQs</li> 
    <li class="top-level">Contact</li> 
    <li class="top-level">Login</li> 
</ul> 

的Javascript：

function alignMenuItems(){ 
    var totEltWidth = 0; 
    var menuWidth = $('ul.menu')[0].offsetWidth; 
    var availableWidth = 0; 
    var space = 0; 

    var elts = $('.menu li.top-level'); //<- 
    elts.each(function(inx, elt) { 
     // reset paddding to 0 to get correct offsetwidth 
     $(elt).css('padding-left', '0px'); 
     $(elt).css('padding-right', '0px'); 

     totEltWidth += elt.offsetWidth; 
    }); 

    availableWidth = menuWidth - totEltWidth; 

    space = availableWidth/(elts.length); 

    elts.each(function(inx, elt) { 
     $(elt).css('padding-left', (space/2) + 'px'); 
     $(elt).css('padding-right', (space/2) + 'px'); 
    }); 
}