제이쿼리를 사용하여 드롭다운 메뉴를 만들고 있는데
상단메뉴를 클릭하여 서브메뉴가 Slideup, Slidedown 되는 것까지는 구현하였습니다.
메뉴 중 하나를 클릭시, 다른 메뉴가 펼쳐져 있으면 Slideup 되는 것 (한번에 하나의 서브메뉴만 보이도록) 도 구현하고 싶은데 어떻게 수정하면 될까요?
Copy
<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개 / 댓글 3개
채택된 답변
+20 포인트
nanati답변에 대한 댓글 3개
pwm417
2018-04-18 (수) 18:16:00
nanati
2018-04-18 (수) 18:25:17
＠pwm417 저도 잘 모르는데 그 부분은 높이 맞추는 것 같네요~
css추가 같아요~ 필요한 부분만 적용하시면 될 것 같습니다^^
css추가 같아요~ 필요한 부분만 적용하시면 될 것 같습니다^^
답변을 작성하려면 로그인이 필요합니다.
혹시 소스 중에 아래 부분은 무엇을 뜻하는 것인가요??
$('.open-4').each(function(){
$(this).css("height",$(this).height()+"px");
});
제가 제이쿼리는 아직 공부를 못해서 잘모르겠네요 ㅠ ㅠ