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

我正在为wordpress主题制作一个长菜单，它出现在两行上。 问题是顶行的子菜单显示在底行的列表项下。 我的解决方案是更改z-index，但我不知道菜单会有多少元素，所以我使用的是jQuery。 这是代码，但它不起作用。 你能帮忙吗？

jQuery(document).ready(function ($) { var items; items=jQuery(".menu>ul>li").length; for (var i=0; iul>li").css("z-index", function( items, i ){ return items - i; }); } },"jQuery"); 

Answer 1

如果要反转列表，可以使用：

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

这将颠倒顺序，因此1,2,3变为3,2,1。 z-index 涉及视觉“分层”方面的显示顺序。

z-index CSS属性指定元素及其后代的z顺序。 当元素重叠时，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); });