모바일 슬라이딩 메뉴 스크립트 질문드립니다.

모바일 슬라이딩 메뉴 스크립트 질문드립니다.

QA

모바일 슬라이딩 메뉴 스크립트 질문드립니다.

본문

안녕하세요.

모바일에서 아래로 펼쳐지는 슬라이딩 메뉴를 구현하고 있습니다.

전혀 반응이 없는데 뭐가 잘못된건지 모르겠습니다...

스타일시트에서 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>
답변을 작성하시기 전에 로그인 해주세요.
전체 75
QA 내용 검색

회원로그인

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