쿼리로 토글메뉴만드는데 잘안되네요..

쿼리로 토글메뉴만드는데 잘안되네요..

QA

쿼리로 토글메뉴만드는데 잘안되네요..

본문

토글슬라이드 로 메뉴를 만들었는데

화살표 항목을 텍스트로 해놓고 토글클래스로 display를 block시켜놓는건 잘됩니다만

화살표모양이 한번 바뀌고는 다시 메뉴 접을때 되돌아가질 않네요...

한참을 낑낑대고있는데....

쿼리구문에 추가되야할 부분좀 봐주실수 있을까요?

 

해당 html부분(메뉴는 7개정도됨)

<ul>

....중략...

         <li><a href="#"><div class="font_fix">커뮤니티</div><div class="font_fix2 up7">∨</div></a>
         <div class="dropdown down7">
            <ul>
    <li style="width:100%;"><a href='/bbs/bbs/board.php?bo_table=bbs_07_01'><div class="font_sub_fix">공지사항</div></a></li>
    <li style="width:100%;"><a href='/bbs/bbs/board.php?bo_table=bbs_07_02'><div class="font_sub_fix">NEWS</div></a></li>
                <li style="width:100%;"><a href='/mobile/2018_07/04.php'><div class="font_sub_fix">오시는 길</div></a></li>
            </ul>
            </div>
        </li>

</ul>

 

토글 클래스 Css는

<style>
.updown{display:block;}
</style>

넣어줬구요

 

쿼리문은

이게 변형하다가 안되고있는거구요

$(document).ready(function(e) {
   $('.dropdown').hide();
   $('#menu>li>a').eq(0).click(function(){
    $('.down1').slideToggle(300).toggleClass('.updown');
    var $updown=$('.down1').toggleClass('.updown');
    if($updown){
    $('.up1').html('∧');
    $('.down2').css('display','none');
    $('.down3').css('display','none');
    $('.down4').css('display','none');
    $('.down5').css('display','none');
    $('.down6').css('display','none');
    $('.down7').css('display','none');
    }else{
     $('.up1').html('∨');
     $('.dropdown').hide();
    };
    });

 

요거는 노가다 스크립트문 만들어서

다른메뉴에 토글클래스가 되면 그나마 바뀌게는 만들었습니다.
하지만 역시 슬라이드업이 되어도 텍스트가 변하지않는문제가있지요 ...

 

  $('#menu>li>a').eq(1).click(function(){
    $('.up1').html('∨');
    $('.up2').html('∧');
    $('.up3').html('∨');
    $('.up4').html('∨');
    $('.up5').html('∨');
    $('.up6').html('∨');
    $('.up7').html('∨');
    $('.down2').slideToggle(300).css('display','block');
    $('.down1').css('display','none');
    $('.down3').css('display','none');
    $('.down4').css('display','none');
    $('.down5').css('display','none');
    $('.down6').css('display','none');
    $('.down7').css('display','none');
    });

});
  
</script>

 

고수님들의 조언이 필요합니다.

필요한 부분이있으시면 말해주세요 올리겠습니다.

이 질문에 댓글 쓰기 :

답변 1

$( '.dropdown' ).prev().click(function() { 
    $(this).next().slideToggle(300, function() {         
        $( '.font_fix2', $(this).prev() ).text( $( '.font_fix2', $(this).prev() ).text() == '∨' ? '∧' : '∨' );
    });
});

간단 명료하게 줄여주셔서 감사합니다!!! 한줄기 빛이되어주셨습니다!
염치없지만....한가지만 더 물어봐도 될까요....?
알려주신대로 했더니 다른메뉴 클릭시 기존 펼쳐져있던메뉴가 접어지던게 사라졌더라구요..
그기능도 같이 사용하려면
어디를 잡아주는게 맞을까요?
-----------------------
$('.dropdown', !$(this)).css('display','none');
이거를 위에넣었더니 사라지기는하나 이번엔 텍스트가 또 말썽이네요...어려운스크립트...

$( '.dropdown' ).prev().click(function() {
    $(this).next().slideToggle(300, function() { 
        if ( $(this).is( ':visible' ) ) {
            $( '.dropdown' ).not( this ).slideUp();
            $( '.font_fix2' ).not( $(this).prev() ).text( '∨' );
        }
        $( '.font_fix2', $(this).prev() ).text( $( '.font_fix2', $(this).prev() ).text() == '∨' ? '∧' : '∨' );
    });
});

헉..방금 계속 실험해보다 드디어 성공해서 성공했어요! 하고 알려드리려고
들어왔는데 답을 적어주셨네요 허헛;;;
제가 해결해낸 답은
$( '.dropdown' ).prev().click(function() {
$( '.dropdown', !$(this)).css('display','none');
    $(this).next().slideToggle(300, function() {       
        $( '.font_fix2', $(this).prev() ).text( $( '.font_fix2', $(this).prev() ).text() == '∨' ? '∧' : '∨' );
    });
$( '.font_fix2', !$(this)).text( $( '.font_fix2', !$(this) ).text() == '∧' ? '∧' : '∨' );
});
요거였는데....
슈와이님께 움직임이 훨씬 부드럽네요!!
덕분에 좋은공부 하고갑니다!! 감사합니다!!!!

답변을 작성하시기 전에 로그인 해주세요.
전체 10
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT