쿼리로 토글메뉴만드는데 잘안되네요.. 채택완료
토글슬라이드 로 메뉴를 만들었는데
화살표 항목을 텍스트로 해놓고 토글클래스로 display를 block시켜놓는건 잘됩니다만
화살표모양이 한번 바뀌고는 다시 메뉴 접을때 되돌아가질 않네요...
한참을 낑낑대고있는데....
쿼리구문에 추가되야할 부분좀 봐주실수 있을까요?
해당 html부분(메뉴는 7개정도됨)
- 커뮤니티∨
....중략...
토글 클래스 Css는
넣어줬구요
쿼리문은
이게 변형하다가 안되고있는거구요
$(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'); });
});
고수님들의 조언이 필요합니다.
필요한 부분이있으시면 말해주세요 올리겠습니다.
답변 1개
$( '.dropdown' ).prev().click(function() { $(this).next().slideToggle(300, function() { $( '.font_fix2', $(this).prev() ).text( $( '.font_fix2', $(this).prev() ).text() == '∨' ? '∧' : '∨' ); }); });
답변에 대한 댓글 3개
$(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() == '∧' ? '∧' : '∨' );
});
요거였는데....
슈와이님께 움직임이 훨씬 부드럽네요!!
덕분에 좋은공부 하고갑니다!! 감사합니다!!!!
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
염치없지만....한가지만 더 물어봐도 될까요....?
알려주신대로 했더니 다른메뉴 클릭시 기존 펼쳐져있던메뉴가 접어지던게 사라졌더라구요..
그기능도 같이 사용하려면
어디를 잡아주는게 맞을까요?
-----------------------
$('.dropdown', !$(this)).css('display','none');
이거를 위에넣었더니 사라지기는하나 이번엔 텍스트가 또 말썽이네요...어려운스크립트...