제이쿼리 질문이요
본문
상단 메뉴에 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
$("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 을 시켜주는거에욥
$("nav").find("li").click(function(){
target = $(this).attr("data-index");
$(".submenu").find("[data-index="+target+"]").show();
});
혹시 마우스 오버 아웃일때는 어떡해해야할까요?
답변을 작성하시기 전에 로그인 해주세요.
