728x90
반응형
메뉴 toggle
각 메뉴를 눌렀을 때 해당하는 하위메뉴들만 보이도록 한다.
1. body
<body>
<p>메뉴만들기</p>
<ul type="square" class="main_menu">
<li class="sub_menu1"><b>(1)css 셀렉터</b>
<ul type="circle" class="sub_menu2">
<li>tag로 선택</li>
<li>id로 선택</li>
<li>class로 선택</li>
<li>parent child 선택</li>
<li>parent > child 로 선택</li>
<li>:nth-child(n/even/odd)로 선택</li>
<li>:first-child로 선택</li>
<li>:last-child로 선택</li>
</ul>
</li>
<li class="sub_memu1"><b>(2)속성 셀렉터</b>
<ul type="circle" class="sub_menu2">
<li>[attr]</li>
<li>[attr=value]</li>
<li>[attr!=value]</li>
<li>...</li>
</ul>
</li>
<li class="sub_menu1"><b>(3)폼 셀렉터</b>
<ul type="circle" class="sub_menu2">
<li>input:타입</li>
</ul>
</li>
<li class="sub_menu1"><b>(4)사용자정의셀렉터</b>
<ul type="circle" class="sub_menu2">
<li>:eq(n)</li>
<li>:first</li>
<li>:last</li>
<li>:even</li>
<li>:odd</li>
<li>:parent</li>
</ul>
</li>
</ul>
</body>
2. script
<style type="text/css">
.main_menu{width:300px;}
.sub_menu1{cursor:pointer;}
.sub_menu2{display:none; cursor:default;}
</style>
<script type="text/javascript" src="resources/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("b").click(function(){
///$(this).next().slideToggle();
//$(this).parent().siblings().find("ul").slideUp();
$(this).next().slideToggle().end().parent().siblings().find("ul").slideUp();
});
});
</script>728x90
반응형
'Web > JQuery' 카테고리의 다른 글
| [JQ]toggleClass (0) | 2020.08.03 |
|---|---|
| [JQ]toggleClass (0) | 2020.08.03 |
| [JQ]effect_02 (0) | 2020.08.03 |
| [JQ]effect_01 (0) | 2020.08.03 |
| [JQ]event (0) | 2020.08.03 |
