제이쿼리 드롭다운 메뉴 채택완료
웹프리존
11년 전
조회 7,538
$(document).ready(function(){
$('li.button a').click(function(e){
var dropDown = $(this).parent().next();
$('.dropdown').not(dropDown).slideUp('fast');
$('.on').css("display", "none");
$('.off').css("display", "block");
dropDown.slideToggle('fast');
$('.on').css("display", "block");
$('.off').css("display", "none");
e.preventDefault();
})
});
6개의 메뉴가 있는데요.
메뉴 클릭시 펼쳐질 때는 .on 클래스를... 다시 클릭하거나 다른 메뉴를 클릭해서
그 열렸던 서브메뉴가 접어질 때는 .off 클래스를 부르는데요
문제는 메뉴가 6개 정도 되는데 1번 메뉴를 클릭하면 그 1번에만 .on 클래스가 적용되어 져야 하는데
전체 메뉴가 다 바껴 버리네요..
각 메뉴 클릭시 드롭다운은 각각 메뉴 다 따로 작동이 되는데 각 메뉴가 클래스명이 같더라도 해당 클래스만 변화를 주고자 할려면 어떻게 해야 할까요
댓글을 작성하려면 로그인이 필요합니다.
답변 5개
채택된 답변
+20 포인트
댓글을 작성하려면 로그인이 필요합니다.
11년 전
</div>
<div><li class="button"><a href="#" class="pink"><img src="./img/sub_menu01_off.gif" alt="" /></a></li></div>
<div><li class="dropdown"></div>
<div> <ul class="submenu"></div>
<div> <li><img src="./img/sub_menu01_1.gif" alt="" /></li></div>
<div> <li><img src="./img/sub_menu01_2.gif" alt="" /></li></div>
<div> <li><img src="./img/sub_menu01_3.gif" alt="" /></li></div>
<div> </ul></div>
<div></li></div>
<div></div>
<div>var old = '',</div>
<div> flag = true;</div>
<div>$('li.button a > img').click(function(e){</div>
<div> $.each($('li.button a > img'), function(index, item){</div>
<div> item.src = item.src.replace('_on','_off');</div>
<div> });</div>
<div> if(old && $(this).attr('src') != old.attr('src') || flag) </div>
<div> $(this).attr('src',$(this).attr('src').replace('_off','_on')); </div>
<div> else </div>
<div> $(this).attr('src',$(this).attr('src').replace('_on','_off')); </div>
<div> old = $(this); flag = !flag;</div>
<div>})</div>
<div>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인