마우스 오버 서브메뉴 block
본문
아래처럼 메뉴를 구성하였는데 마우스 오버시 <li class="gnb1">, <li class="gnb2">의 뒤에 on 이란 클래시가붙어서 <li class="gnb1 on">, <li class="gnb2 on">붙고 <div class="gnb-2dep" style="display: block;">하게해서 대메뉴에 마우스 오버시 서브메뉴가 보여지게 하고싶습니다.
스크립트좀 부탁드려요
<li class="gnb1">대메뉴1
<div class="gnb-2dep" style="display: none;">서브메뉴1-1</div>
<li>
<li class="gnb2">대메뉴2
<div class="gnb-2dep" style="display: none;">서브메뉴2-1</div>
<li>
답변 1
코드 편의성을 위해 대메뉴의 클래스를 gnb 로 동일하게 하는 것을 추천하겠습니다.
예제코드입니다.
<script>
$(function() {
$('.gnb').hover(function() {
$(this).find('div').show();
}, function() {
$(this).find('div').hide();
});
});
</script>
<li class="gnb">대메뉴1
<div class="gnb-2dep" style="display: none;">서브메뉴1-1</div>
<li>
<li class="gnb">대메뉴2
<div class="gnb-2dep" style="display: none;">서브메뉴2-1</div>
<li>
대메뉴1, 대메뉴2를 꼭 gnb1, gnb2 클래스로 클래스명이 다르게 가야 한다면,
위의 코드에서 셀렉터를
$('.gnb').hover(function() {
->
$('li[class^=gnb').hover(function() {
식으로 변경해도 됩니다.
답변을 작성하시기 전에 로그인 해주세요.