제이쿼리 드롭다운 메뉴

웹프리존 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2014.03.13 05:23:12 조회 7510 (211.♡.♡.161)

본문

$(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 클래스가 적용되어 져야 하는데

전체 메뉴가 다 바껴 버리네요..

각 메뉴 클릭시 드롭다운은 각각 메뉴 다 따로 작동이 되는데 각 메뉴가 클래스명이 같더라도 해당 클래스만 변화를 주고자 할려면 어떻게 해야 할까요

#그누보드4 #javascript

답변 5

커네드커네드 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2014-03-13 13:52:49 211.♡.♡.250

$(document).ready(function(){

$('.menu ul>li a').click(function(){

var li = $(this).parent();

if(li.hasClass('on')){

$(this).parent().removeClass('on');

$('.submenu').slideUp('fast').parent().hide();

$(this).find('img').attr("src",$(this).find('img').attr("src").replace("on","off"));

}else{

$(this).parent().siblings('li').removeClass('on');

$('.button a >img').attr("src",$('.button a >img').attr("src").replace("on","off"));

$('.submenu').slideUp('fast').parent().hide();

$(this).parent().addClass('on').next().show().find('ul').slideDown('fast');

$(this).find('img').attr("src",$(this).find('img').attr("src").replace("off","on"));

}

});

</script>

<ul>

<li>

111

</li>

<li>

2222

</li>

<li>

3333

</li>

</ul>

</li>

<li>

4444

</li>

<li>

5555

</li>

<li>

6666

</li>

</ul>

</li>

</ul>

</li>

</ul>

이렇게 하시면 될거 같아요~

html에서 필요 없어보이는건 삭제했어요

슈와이 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2014-03-13 13:57:25 58.♡.♡.180


<li class="button"><a href="#" class="pink"><img src="./img/sub_menu01_off.gif" alt="" /></a></li>
<li class="dropdown">
    <ul class="submenu">
        <li><img src="./img/sub_menu01_1.gif" alt="" /></li>
        <li><img src="./img/sub_menu01_2.gif" alt="" /></li>
        <li><img src="./img/sub_menu01_3.gif" alt="" /></li>
    </ul>
</li>


var old = '',
    flag = true;
$('li.button a > img').click(function(e){
    $.each($('li.button a > img'), function(index, item){
        item.src = item.src.replace('_on','_off');
    });
    if(old && $(this).attr('src') != old.attr('src') || flag) 
        $(this).attr('src',$(this).attr('src').replace('_off','_on'));    
     else                  
        $(this).attr('src',$(this).attr('src').replace('_on','_off'));             
     old = $(this); flag = !flag;
})

커네드커네드 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2014-03-13 13:03:57 211.♡.♡.250

html을 봤으면 좋겠는데...

$(document).ready(function(){

$('.ul>li').click(function(){

var lia = $(this)

if(lia.hasClass('on')){

$(this).find('ul').slideUp('fast');

}else{

$(this).siblings('li').removeClass('on').each(function(){

$(this).find('ul').slideUp('fast');

});

$(this).addClass('on').find('ul').slideDown('fast');

}

});

</script>

.ul{width:300px;position:relative;}

.ul li{background:red;display:inline;color:#fff;}

.ul li ul{display:none;position:absolute;top:20px;left:0;}

.ul li ul li{background:blue;color:#fff;}

</style>

<li>1번메뉴

<ul>

</ul>

</li>

<li>2번메뉴

<ul>

</ul>

</li>

</ul>

가장 간단하게는 이렇게 하시면 될거 같네요

웹프리존 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2014-03-13 13:16:52 110.♡.♡.217

html 은

이렇게 되어 있습니다.

$(document).ready(function(){

$('li.button a').click(function(e){
  var dropDown = $(this).parent().next();
  $('.dropdown').not(dropDown).slideUp('fast');
  dropDown.slideToggle('fast');
  e.preventDefault();
})
});

</script>

</ul>
</li>

</ul>
</li>

</ul>

웹프리존 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2014-03-13 14:09:55 110.♡.♡.217

답변 주신 2분 정말 감사드립니다.

덕분에 해결되었고 많이 배워갑니다 ^^

답변을 작성하시기 전에 로그인 해주세요.

제이쿼리 드롭다운 메뉴

QA