.toggleClass()
원하는 요소에 새로운 클래스를 추가하거나 제거하기가 매우 쉽고 간단하게 반복이 가능하다.
설정된 클래스명을 해당하는 요소가 가지고 있는지 판단하여
해당 요소가 있으면 이를 제거하고, 해당 요소가 없다면 이를 부여한다.
toggleClass를 이용하여 아코디언 액션 처리
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery - 아코디언 액션</title>
<script src="jquery-3.6.0.min.js"></script>
<style type="text/css">
ul, li, a {
margin: 0;
padding: 0;
}
li {
list-style-type: none; /* list-style: none과 크게 다른게 없다 */
}
a {
text-decoration: none;
color: navy;
}
#menu {
position: absolute;
width: 30%;
height: 100%;
background-color: navy;
}
#menu a {
display: block; /* 통상적으로 많이 적용되는 스타일 */
background-color: lightyellow;
border-top: 1px solid lightblue; /* 일반적으로 실제 사이트에서 border는 상하만 적용 */
border-bottom: 1px solid lightblue;
}
#menu a.on { /* 현재 태그가 선택되었을때 */
color: red;
}
#menu li ul { /* 셔츠, 가디건 등 */
display: none; /* hidden과의 차이점 찾아보기! - 공간차지 여부? */
}
#menu li ul.on { /* 선택되면 block으로 보이도록 */
display: block;
}
#menu ul a {
background-color: lightblue;
}
/* CSS의 우선 순위는 지엽적일수록 높다. */
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#menu a.m').click(function() {
$(this).next().addBack().toggleClass("on"); // #menu a.m에 클래스명 on 추가
});
});
</script>
</head>
<body>
<!-- 아코디언 액션 - 펼쳤다 접었다하는 액션 -->
<ul id="menu">
<li><a href="#" class="m">상의</a>
<ul>
<li><a href="#">셔츠</a></li>
<li><a href="#">가디건</a></li>
<li><a href="#">자켓</a></li>
</ul>
</li>
<li><a href="#" class="m">하의</a>
<ul>
<li><a href="#">청바지</a></li>
<li><a href="#">슬랙스</a></li>
<li><a href="#">스커트</a></li>
</ul>
</li>
<li><a href="#" class="m">신발</a>
<ul>
<li><a href="#">운동화</a></li>
<li><a href="#">구두</a></li>
<li><a href="#">샌들</a></li>
</ul>
</li>
</ul>
</body>
</html>'개발 공부 > JavaScript + jQuery' 카테고리의 다른 글
| [Javascript] Optional Chaining (?.), Nullish coalescing operator (??) (0) | 2024.04.03 |
|---|---|
| [JavaScript] var, let, const 차이점 / 호이스팅 (0) | 2022.01.27 |
| [jQuery] Ajax, JSON 활용 & 동기와 비동기의 개념 (0) | 2021.09.01 |
