모바일 슬라이딩 메뉴 스크립트 질문드립니다.
본문
안녕하세요.
모바일에서 아래로 펼쳐지는 슬라이딩 메뉴를 구현하고 있습니다.
전혀 반응이 없는데 뭐가 잘못된건지 모르겠습니다...
스타일시트에서 display:none을 끄면
슬라이드업은 또 되네요..ㅠ
안보이는 상태에서 누르면 내려가면서 보여야 하는데 말이죠...
고수님들 도움 부탁드립니다....ㅠ
<style>
.gnb dl {display:none}
</style>
<div class="gnb">
<ul>
<li>
<h4>테스트메뉴</h4><i class="fa fa-chevron-down ico_ar"></i>
<div>
<dl>
<dt><a href="<?php echo G5_URL?>/content/1/">테스트메뉴1</a></dt>
<dt><a href="<?php echo G5_URL?>/content/2/">테스트메뉴2</a></dt>
</dl>
</div>
</li>
</div>
<script>
$(function(){
$(".gnb h4").click(function(){
$(".gnb ul dl").slideUp();
$('.ico_ar').css('transform','none');
if(!$(this).next().is(":visible"))
{
$(this).next().slideDown();
$(this).find('.ico_ar:eq(0)').css('transform','rotate(180deg)');
}
})
})
</script>
답변 1
<script>
$(function() {
$(".gnb h4").on('click', function() {
let $dl = $(this).parent().find('dl');
if ($dl.is(":visible")) {
$dl.slideUp();
$(this).parent().find('.ico_ar').css('transform','none');
} else {
$dl.slideDown();
$(this).parent().find('.ico_ar').css('transform','rotate(180deg)');
}
});
});
</script>
와... 감사합니다!
답변을 작성하시기 전에 로그인 해주세요.