쿼리로 토글메뉴만드는데 잘안되네요..
본문
토글슬라이드 로 메뉴를 만들었는데
화살표 항목을 텍스트로 해놓고 토글클래스로 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() == '∧' ? '∧' : '∨' );
});
요거였는데....
슈와이님께 움직임이 훨씬 부드럽네요!!
덕분에 좋은공부 하고갑니다!! 감사합니다!!!!
