<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>아코디언 액션</title>
<script src="jquery-3.6.0.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: yellow;
font-weight: bold;
}
#menu {
position: absolute;
width: 15%;
height: 100%;
background: darkgreen;
}
#menu a {
display: block;
background: lightgreen;
border-top: 2px solid orange;
border-bottom: 2px solid orange;
}
#menu a.on {
color: red;
}
#menu li ul {
display: none;
}
#menu li ul.on {
display: block;
}
#menu ul a {
background: lightblue;
font-size: 12px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#menu a.category").click(function() {
$(this).next().addBack().toggleClass("on");
});
});
</script>
</head>
<body>
<ul id="menu">
<li><a href="#" class="category">상의</a>
<ul>
<li><a href="#">긴팔티</a></li>
<li><a href="#">반팔티</a></li>
<li><a href="#">가디건</a></li>
</ul></li>
<li><a href="#" class="category">하의</a>
<ul>
<li><a href="#">청바지</a></li>
<li><a href="#">면바지</a></li>
<li><a href="#">슬랙스</a></li>
</ul></li>
<li><a href="#" class="category">잡화</a>
<ul>
<li><a href="#">가방</a></li>
<li><a href="#">신발</a></li>
<li><a href="#">벨트</a></li>
</ul></li>
</ul>
</body>
</html>
