Question

我有一个导航栏，我需要始终保持当前的一个。我想出了这段代码，但我不知道为什么它不起作用：

$(this).find('ul.sub_nav').css('z-index', function(index) {
     return index++;
});

我在chrome中检查它，无论我尝试多少次，它都显示为<ul class="sub_nav" style="z-index: 0;">。

它的初始z-index为1，仅供参考。

我解决了什么：

var zIndex = 1;

$(document).ready(function() {
    $('ul.top_nav > li').hover(function() {
        zIndex++;
        $(this).find('ul.sub_nav').css('z-index', zIndex);
    });
});

JS更简单的解决方案。

Answer 1

我相信你应该这样做，如果你希望每个元素的zIndex大于特定集合中的前一个元素。

var subs  = $(this).find('ul.sub_nav');
var index = subs.eq(0).css('z-index');
subs.gt(0).each(function() {
    $(this).css('z-index', ++index);
});

Answer 2

为什么不使用css而不是使用jquery和js来设置z-index。此外，如果您使用z-index确保元素的位置设置为相对。

https://developer.mozilla.org/en/CSS/z-index

如果你不能只设置css试试：

$(this).find('ul.sub_nav').css('z-index', function(index, value) {
     return value++;
});

Answer 3

而不是function(index)，可以尝试function(i, index)。

Answer 4

如果您只想看到一个几个导航栏，.hide()所有导航栏和.show()想要查看的导航栏要容易得多。

$('ul.sub_nav').not('.current').hide();
$('ul.sub_nav.current').show();

如果您包含实际的HTML并告诉我们更多关于您真正想要实现的内容的话，我们可以更准确地推荐一下。

在你的问题的代码示例中，这是什么JS：

$(this).find('ul.sub_nav').css('z-index', function(index) {
     return index++;
});

将z-index设置为一个值，该值对应于每个对象在.find（）jQuery对象中的位置。因此，对于$(this).find('ul.sub_nav')对象中的第一个对象，index参数将为零，并且您将z-index设置为0.对于集合中的第二个对象，它将设置为1并且等等。

如果您只想显示一个特定的导航栏，为什么不显示该导航栏并隐藏其他导航栏。这比在所有这些上管理z-index要简单得多。

此外，这些导航栏是position: absolute吗？如果它们是position: static（默认值），则z-index不会影响它们。

Answer 5

您的变量索引没有递增。它超出了你的循环范围。我会尝试这样的事情。

$(this).find('ul.sub_nav').each(function(i) {
    $(this).css('z- index', i+1)} )

Answer 6

你也可以做类似的事情 $(yourelement).on("mouseover",function(){ $(this).css("z-index", "+=1") }); ..确保你已经设置了一个初始z-index，例如在css

Answer 7

这也可以这样做：在页脚或除头部之外的任何地方添加html跨度

<span class='current-index' style='display: none;'>1</span>

然后在您的jquery点击事件中，您可以执行此操作

$('.a_link_or_button').click(function(){
//get the current z-index value    
   var currentIndex=$('.current-index').text();
   $('.anotherDiv').show().css('z-index', currentIndex');

   //update the span which holds the current index with new z-index    

   var newCurrentIndex=parseInt(currentIndex)+1;

   $('.curent-index').text(newCurrentIndex);

希望它可以帮助那些人。注意：您可以使用悬停功能

代替点击功能

jquery中的增量z-index

7 个答案: