자바스크립트 질문드립니다 ㅠ
본문
안녕하세요.
gnb 메뉴중 하나를 클릭하면
하위메뉴가 밑으로 나오는걸 구성중입니다.
소스는 아래와 같습니다.
<div class="gnb">
<ul>
<li><a href="#" class="gnb_btn2">대메뉴1</a></li>
<li><a href="#" class="gnb_btn3">대메뉴2</a></li>
<li><a href="#" class="gnb_btn">대메뉴3</a></li>
</ul>
</div>
<div class="gnb_bar">
<dl>
<dd><a href="#">하위메뉴1</a></dd>
<dd><a href="#">하위메뉴2</a></dd>
<dd><a href="#">하위메뉴3</a></dd>
</dl>
</div>
<div class="gnb_bar2">
<dl>
<dd><a href="#">하위메뉴1</a></dd>
<dd><a href="#">하위메뉴2</a></dd>
<dd><a href="#">하위메뉴3</a></dd>
</dl>
</div>
<div class="gnb_bar3">
<dl>
<dd><a href="#">하위메뉴1</a></dd>
<dd><a href="#">하위메뉴2</a></dd>
<dd><a href="#">하위메뉴3</a></dd>
</dl>
</div>
<script type="text/javascript">
<!--
jQuery(document).ready(function(){
jQuery(".gnb_btn").on("click", function(){
jQuery(".gnb_bar").toggleClass("on");
});
});
//-->
</script>
<script type="text/javascript">
<!--
jQuery(document).ready(function(){
jQuery(".gnb_btn2").on("click", function(){
jQuery(".gnb_bar2").toggleClass("on");
});
});
//-->
</script>
<script type="text/javascript">
<!--
jQuery(document).ready(function(){
jQuery(".gnb_btn3").on("click", function(){
jQuery(".gnb_bar3").toggleClass("on");
});
});
//-->
</script>
실력이 허접해서 나름대로 검색해서 만들어놨는데요..ㅎ
문제는...
1번 대메뉴 클릭 후
2번 대메뉴를 클릭하면
1번 대메뉴의 하위 메뉴가 그대로 유지가 됩니다. 없어지지 않구요..
대메뉴를 클릭하면 다른 대메뉴의 하위메뉴들을 없애는 방법이 없을까요?ㅠ
고수님들의 자문 부탁드리옵니다.
읽어주셔서 감사합니다.
답변 2
slideToggle()와 toggleClass()를 이용하여 하위메뉴를 열고닫구요
siblings()와 removeClass()를 이용해 다른 대메뉴들을 조절합니다.
대메뉴1 눌렀을때 하위2,3 사라지게하고 하위1 나오게 하고
대메뉴2 눌렀을때 하위1,3 사라지고 하위2 나오고 이런식으로 하시면 되요
답변을 작성하시기 전에 로그인 해주세요.
