제이쿼리 질문이요 채택완료
릴보이즈
6년 전
조회 2,351
상단 메뉴에 data-index와 서브메뉴 data-index를 비교를 하려고 하는데요
밑에 태그처럼 서로 값이 일치하면 show()를 하려고하는데 어떡해하면 될까요?
<nav>
<ul>
<li data-index="1">메뉴1</li>
<li data-index="2">메뉴2</li>
<li data-index="3">메뉴3</li>
<li data-index="4">메뉴4</li>
</ul>
</nav>
<div class="submenu">
<div class="wrap" data-index="1">서브1</div>
<div class="wrap" data-index="2">서브2</div>
<div class="wrap" data-index="3">서브3</div>
<div class="wrap" data-index="4">서브4</div>
</div>
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
6년 전
$("nav li").hover(function(){
var n = parseInt($(this).index()) + 1;
$(".submenu > div:nth-child(" + n + ")").show();
},function(){
$(".submenu > div").hide();
})
굳이 어트리뷰트를 사용하시기 보단 마우스이벤트 대상의 index값에 + 1을 해서 show할 대상의 nth번호를 검색하는것도 나름의 방법이랍니다
index값에 int로 변환해서 +1을 시켜주는 이유는 index값은 0 부터 시작하고 nth는 1번부터 시작하기떄문에 숫자로 변환시켜서 +1 을 시켜주는거에욥
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인