<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.menu-btn {
background-color: #fff;
border: none;
cursor: pointer;
padding: 8px;
margin-bottom: 4px;
width: 100%;
text-align: left;
font-size: 16px;
}
.menu-content {
display: none;
padding: 8px;
background-color: #f9f9f9;
border-left: 4px solid #ccc;
}
</style>
</head>
<body>
<div class="menu">
<button class="menu-btn" id="menu-btn-1">메뉴 1</button>
<div class="menu-content" id="menu-content-1">
<!-- 메뉴 1의 내용 -->
</div>
<button class="menu-btn" id="menu-btn-2">메뉴 2</button>
<div class="menu-content" id="menu-content-2">
<!-- 메뉴 2의 내용 -->
</div>
<button class="menu-btn" id="menu-btn-3">메뉴 3</button>
<div class="menu-content" id="menu-content-3">
<!-- 메뉴 3의 내용 -->
</div>
</div>
<script>
// 모든 메뉴 버튼과 내용을 가져옴
const menuBtns = document.querySelectorAll(".menu-btn");
const menuContents = document.querySelectorAll(".menu-content");
// 메뉴를 닫는 함수
function closeMenus() {
menuContents.forEach((menu) => {
menu.style.display = "none";
});
}
// 메뉴 버튼 클릭 시 해당 메뉴를 열고, 다른 메뉴는 닫음
menuBtns.forEach((btn) => {
btn.addEventListener("click", () => {
// 모든 메뉴를 닫음
closeMenus();
// 해당 메뉴를 펼침
const contentId = btn.getAttribute("id").replace("menu-btn", "menu-content");
const content = document.getElementById(contentId);
content.style.display = "block";
});
});
// 메뉴 이외의 영역을 클릭 시 모든 메뉴를 닫음
document.addEventListener("click", (event) => {
const target = event.target;
if (!target.classList.contains("menu-btn") && !target.classList.contains("menu-content")) {
closeMenus();
}
});
</script>
</body>
</html>
'JS' Related Articles