훈돌라
2024. 5. 17. 베이직반 자바 스크립트 복습 본문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 기초</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="side-bar">
<div>
<button class="side-bar-btn">열기</button>
</div>
<ul>
<li>
메뉴1
</li>
<li>
메뉴2
</li>
<li>
메뉴3
</li>
</ul>
</div>
<script src="index.js"></script>
</body>
</html>
const sidebarbtn = document.querySelector(".side-bar-btn")
const bar = document.querySelector(".side-bar")
sidebarbtn.addEventListener("click", () => {
if (bar.classList.contains("active")) {
bar.classList.remove("active");
sidebarbtn.textContent = "열기";
} else {
bar.classList.add("active");
sidebarbtn.textContent = "닫기";
}
})
.side-bar {
width: 300px;
position: fixed;
top: 0;
left: -260px;
width: 300px;
height: 100%;
background-color: #dfdfdf;
border-right: 2px solid #afafaf;
transition: left 0.3s;
}
.side-bar-btn {
float: right;
}
.active {
left: 0;
}
열기 버튼인 side bar btn 과 열기 버튼이 있는 side bar 를 각각 변수로 지정해준 뒤
side bar btn 에 클릭 이벤트를 추가해 if 문으로 active 라는 스타일 클래스가 존재한다면 active 를 remove 해주고
버튼의 textcontent 를 "열기" 로 설정,
else 그것이 아니라면 active 라는 스타일 클래스를 추가하고, 버튼의 textcontent 를 "닫기" 로 설정.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 기초</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<button type="button" class="collapsible">열어봐</button>
<div class="content">
<p>안녕</p>
</div>
<button type="button" class="collapsible">열어봐2</button>
<div class="content">
<p>안녕2</p>
</div>
<button type="button" class="collapsible">열어봐3</button>
<div class="content">
<p>안녕3</p>
</div>
<script src="index.js"></script>
</body>
</html>
document.addEventListener('DOMContentLoaded', function () {
const collapsibles = document.querySelectorAll('.collapsible');
for (let i = 0; i < collapsibles.length; i++) {
collapsibles[i].addEventListener('click', function () {
const content = this.nextElementSibling;
if (content.style.display === 'block') {
content.style.display = 'none';
} else {
content.style.display = 'block';
}
});
}
});
.collapsible {
background-color: #828282;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active,
.collapsible:hover {
background-color: #ccc;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
DOMContentLoaded 이벤트를 사용하여 DOM이 완전히 로드된 후 코드를 실행
querySelectorAll('.collapsible')를 사용하여 모든 .collapsible 버튼을 선택
for 문을 사용하여 각 .collapsible 버튼에 대해 클릭 이벤트 리스너를 추가
클릭된 버튼의 다음 요소인 .content의 display 속성을 block과 none 사이에서 토글