如何使用jQuery更改菜單中列表項的z-index？

我爲wordpress主題製作了一個長菜單，它出現在兩行上。問題在於最上面一行的子菜單出現在最下面一行的列表項下。我的解決方案是改變z-index，但我不知道菜單中有多少元素，所以我使用jQuery。這是代碼，但它不起作用。你能幫忙嗎？如何使用jQuery更改菜單中列表項的z-index？

jQuery(document).ready(function ($) { 
    var items; 
    items=jQuery(".menu>ul>li").length; 

    for (var i=0; i<items; i++){ 
     jQuery(".menu>ul>li").css("z-index", function(items, i){ 
      return items - i; 
     }); 
    } 

},"jQuery");

來源

2014-04-04 maniuni

意味着你需要先立的z-index 1，第二立的z-index 2和第三李的z-index 3？ –

另一種方式 - 我想要第一個元素與最高的索引等。 – maniuni

你爲什麼要改變元素的「z-index」屬性？「z-index」不是HTML元素的排序索引。通過W3Schools定義它是這樣的：z-index屬性指定元素的堆棧順序。堆棧順序較大的元素始終位於堆棧順序較低的元素前面。 –

如果要反轉的列表中，你可以使用：

var list = $('.menu>ul'); 
var items = list.children('li'); 
list.append(items .get().reverse());

這將順序顛倒，所以1,2,3變爲3,2,1。 z-indexrelates to the display order in terms of visual 'layering'.

的z索引CSS屬性指定的元素，其後代的z順序。當元素重疊時，z順序決定哪一個覆蓋另一個。具有較大z-索引的元素通常覆蓋較低元素的元素。

如果你想扭轉z-index你可以使用：

var num= $('.menu>ul>li').length; /* or suitably high number depending on your layout */ 
$('.menu>ul>li').each(function(i, item) { 
    $(item).css('z-index', num - i); 
});

來源

2014-04-04 08:30:14 SW4

也許我問的問題不夠清楚。實際上，我希望列表項目以正常順序顯示，但第一個顯示在下一個頂部。我會修改這個問題！ – maniuni

@maniuni - 查看答案的最後部分 – SW4

如何使用jQuery更改菜單中列表項的z-index？

回答

相關問題