안녕하세요.
모바일에서 아래로 펼쳐지는 슬라이딩 메뉴를 구현하고 있습니다.
전혀 반응이 없는데 뭐가 잘못된건지 모르겠습니다...
스타일시트에서 display:none을 끄면
슬라이드업은 또 되네요..ㅠ
안보이는 상태에서 누르면 내려가면서 보여야 하는데 말이죠...
고수님들 도움 부탁드립니다....ㅠ
Copy
<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개 / 댓글 1개
채택된 답변
+20 포인트
마르스컴퍼니
2022-08-16 (화) 19:31:36
Copy
<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>답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.