jquery의 증분 z- 인덱스

Question

탐색 모음이 있으며 항상 현재 위치를 유지해야합니다. 이 코드를 내놓았다,하지만 작동하지 않는 이유를 모르겠어요 :

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

나는 크롬에서 그것을 검사하고 그것을 보여줍니다 모든 상관없이 나는 그것을 시도 횟수 <ul class="sub_nav" style="z-index: 0;"> 없습니다.

초기 값은 z-index입니다. 다만 FYI입니다. JS와

var zIndex = 1; 

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

훨씬 간단한 해결책을 : 내가 해결 무엇

---

.

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

jquery 및 js 대신 css를 사용하여 z- 색인을 설정하지 않는 이유는 무엇입니까? 또한 z- 인덱스를 사용하는 경우 요소의 위치가 상대적으로 설정되어 있는지 확인하십시오.

이

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

Answer 3

대신 function(index), 어쩌면 function(i, index)을 시도 : 당신은 단지 CSS를 시도를 설정할 수없는 경우

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

.

Answer 4

여러 개의 navbar 중 하나만 표시하려면 모든 navb가 .hide(), 표시하려면 .show()이 훨씬 쉽습니다.

실제 HTML을 포함하고 실제로 달성하려는 내용에 대해 더 자세히 알려면 무엇을 추천해야할지 더 정확하게 말할 수 있습니다. 질문의 코드 예에서

이것은 JS 의미 :

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

각 오브젝트가 .find()의 jQuery 객체에있는 위치에 대응하는 값으로 Z- 인덱스 설정 않는다. 따라서 $(this).find('ul.sub_nav') 개체의 첫 번째 개체의 경우 index 인수는 0이되고 Z- 인덱스는 0으로 설정됩니다. 집합의 두 번째 개체의 경우 1로 설정됩니다.

하나의 특정 navbar 만 보이게하려면 그 중 하나를 표시하고 다른 것을 숨기십시오. 그것들은 모두 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

또한 방금 당신이 예를 들어, inital Z- 인덱스를 설정했는지 확인 ..
$(yourelement).on("mouseover",function(){ $(this).css("z-index", "+=1") }); 과 같은 작업을 수행 할 수 있습니다 CSS

Answer 7

이도 수행 할 수 있습니다 :이

$('.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와 클릭 이벤트에

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

다음 헤드 섹션에서 아무 곳이나 떨어져 바닥 글에 HTML 범위를 추가하거나 누군가를 도와줍니다. 참고 : 클릭 기능 대신 마우스를 올리면