1. HTML
: 목차 태그를 사용하여 트리구조 잡아줌
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<div>
<ul>
<li class="menu">
<a>상위메뉴1</a>
<ul class="hide">
<li>메뉴1-1</li>
<li>메뉴1-2</li>
<li>메뉴1-3</li>
</ul>
</li>
<li class="menu">
<a>상위메뉴2</a>
<ul class="hide">
<li>메뉴2-1</li>
<li>메뉴2-2</li>
<li>메뉴2-3</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
2. CSS
: 상위메뉴 클릭전에 화면에 보이지 않도록 세팅,
클릭 가능한 것일 경우 마우스 포인터 이미지 변경
.menu .hide{
display: none;
}
.menu a{
background-color: yellow;
cursor: pointer;
}cursor : 마우스포인터가 요소 위에 있을 때 표시할 마우스 커서를 설정
3. JavaScript
: 상위메뉴 클릭전에 화면에 보이지 않도록 세팅,
클릭 가능한 것일 경우 마우스 포인터 이미지 변경
$(document).ready(function(){
$(".menu>a").click(function(){
/* $(this).next("ul").toggleClass("hide") */;
var submenu = $(this).next("ul");
if (submenu.is(":visible")) {
submenu.slideUp();
} else {
submenu.slideDown();
}
});
});4. 코드 실행
5. 응용
: mouseover, mouseout 이용하여 목록 펼치고 닫기
$(this) : 선택자로 클릭한 것만 실행되도록 지정해 주는 변수. 만약 this가 아닌 .menu>a를 넣어주면 메뉴 하나만 이벤트 실행했는데도 상위메뉴1, 상위메뉴2 모두 펼쳐짐
참고 : https://stove99.tistory.com/103 (메뉴 접었다/펼쳤다 구현)
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor (CSS의 cursor 설명)
사부작