如何使用jQuery更改菜单中列表项的Z索引? [英] How to change the z-index of list items in a menu with jQuery?

问题描述

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

I am making a long menu for a wordpress theme and it appears on two rows. The problem is that the sub menu of the top row appears under the list items on the bottom row. My solution is to change the z-index but I don't know how many elements the menu will have so I am using jQuery. Here is the code but it doesn't work. Could you help?

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

推荐答案

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

If you want to reverse the list, you can use:

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

这将颠倒顺序，因此1,2,3变为3,2,1. z-index 在视觉分层"方面与显示顺序相关

This will reverse the order, so 1,2,3 becomes 3,2,1. z-index relates to the display order in terms of visual 'layering'.

z-index CSS属性指定元素及其元素的z顺序 后裔.当元素重叠时，z顺序确定哪一个 涵盖另一个. z索引较大的元素通常覆盖 较低的元素.

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，可以使用:

If you want to reverse z-index you can use:

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

这篇关于如何使用jQuery更改菜单中列表项的Z索引?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！