제이쿼리 드롭다운 메뉴 질문입니다.

제이쿼리 드롭다운 메뉴 질문입니다.

QA

제이쿼리 드롭다운 메뉴 질문입니다.

본문

제이쿼리를 사용하여 드롭다운 메뉴를 만들고 있는데 

상단메뉴를 클릭하여 서브메뉴가 Slideup, Slidedown 되는 것까지는 구현하였습니다. 

 

메뉴 중 하나를 클릭시,  다른 메뉴가 펼쳐져 있으면 Slideup 되는 것 (한번에 하나의 서브메뉴만 보이도록) 도 구현하고 싶은데 어떻게 수정하면 될까요? 

 


 <script>
    $(document).ready(function(){
        $("#gnb>li>div").click(function(){
            var submenu = $(this).next("ul");
            if( submenu.is(":visible") ){
                submenu.slideUp();
            }else{
                submenu.slideDown();
            }
        });
    });
</script>
 
<div class="collapse navbar-collapse main" id="navbarResponsive">
    <ul class="navbar-nav ml-auto" id="gnb">
        <li class="nav-item m1">
            <a class="nav-link-lg" href="#">Company</a>
            <div class="nav-link js-scoll-trigger">Company</div>
            <ul class="hide">
                <li><div></div></li>
                <li><a href="#">회사소개</a></li>
                <li><a href="#">연혁</a></li>
                <li><a href="#">연구소소개</a></li>
                <li><a href="#">조직도</a></li>
                <li><a href="#">오시는길</a></li>                
            </ul>    
        </li>                        
        <li class="nav-item m2">
            <a class="nav-link-lg" href="#">business</a>
            <div class="nav-link js-scoll-trigger">business</div>                                
            <ul class="hide">
                <li><div></div></li>
                <li><a href="#">사업1</a></li>
                <li><a href="#"><span class="le-spa">사업2</span></a></li>
                <li><a href="#"><span class="le-spa">사업3</span></a></li>
            </ul>                                        
        </li>                        
        <li class="nav-item m3">
            <a class="nav-link-lg" href="#">products</a>
            <div class="nav-link js-scoll-trigger">products</div>                                
            <ul class="hide">
                <li><div></div></li>
                <li><a href="#"><span class="le-spa">제품1</span></a></li>
                <li><a href="#">제품2</a></li>
                <li><a href="#">제품3</a></li>
            </ul>                                        
        </li>                        
    </ul>    
</div>    
 
 

 

이 질문에 댓글 쓰기 :

답변 1

http://mugen00.moo.jp/sample/js_toggle/js_toggle.html

위 페이지 데모의 4번 항목 참고하세요~

소스보기하시면 js 나옵니다.

답변 정말정말 감사합니다!!!

혹시 소스 중에 아래 부분은 무엇을 뜻하는 것인가요??
  $('.open-4').each(function(){
        $(this).css("height",$(this).height()+"px");
    });

제가 제이쿼리는 아직 공부를 못해서 잘모르겠네요 ㅠ ㅠ

답변을 작성하시기 전에 로그인 해주세요.
전체 27
QA 내용 검색

회원로그인

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