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

Question

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

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");

Answer 1

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

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

这将颠倒顺序，因此 1,2,3 变为 3,2,1。 z-index relates to the display order in terms of visual 'layering'.

The z-index CSS property specifies the z-order of an element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.

如果你想反转 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);
});