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

Posted 2023-03-06

【中文标题】如何使用 jQuery 更改菜单中列表项的 z-index？

【英文标题】：How to change the z-index of list items in a menu with jQuery?

【发布时间】：2014-05-16 10:42:19

【问题描述】：

我正在为 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");

【问题讨论】：

表示你需要第一个 li z-index 1，第二个 li z-index 2 和第三个 li z-index 3？

反之 - 我希望第一个元素具有最高索引，依此类推。

为什么要更改元素的“z-index”属性？ “z-index”不是 html 元素的排序索引。根据 W3Schools 的定义，它是这样的： z-index 属性指定元素的堆栈顺序。堆栈顺序较大的元素总是在堆栈顺序较低的元素之前。

表示如果我们有 5 li 那么第一个 li z-index 应该是 5？

我修改了问题，希望现在更清楚了。

【参考方案1】：

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

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-index CSS 属性指定元素的 z 顺序及其 子孙。当元素重叠时，z-order 确定哪一个 覆盖另一个。 z-index 较大的元素通常覆盖 具有较低元素的元素。

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

【讨论】：

也许我问的问题不够清楚。实际上，我希望列表项以正常顺序出现，但第一个出现在下一个之上。我会修改问题！