<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step04_DropDown.html</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/bootstrap.bundle.js"></script>
</head>
<body>
<div class="container">
<h1>dropdown 버튼 테스트</h1>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<div class="dropdown" id="myDrop">
<button id="btn0" class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
메뉴 선택
</button>
<ul class="dropdown-menu">
<li id="btn1"><a class="dropdown-item" href="#">김밥</a></li>
<li id="btn2"><a class="dropdown-item" href="#">라면</a></li>
<li id="btn3"><a class="dropdown-item" href="#">떡볶이</a></li>
</ul>
</div>
</div>
<script>
// document.querySelector("#btn1").addEventListener("click", (e)=>{
// document.querySelector("#btn0").innerText = e.target.innerText
// });
// document.querySelector("#btn2").addEventListener("click", (e)=>{
// document.querySelector("#btn0").innerText = e.target.innerText
// });
// document.querySelector("#btn3").addEventListener("click", (e)=>{
// document.querySelector("#btn0").innerText = e.target.innerText
// });
// 아이디가 myDrop 인 요소의 자손중에서 모든 a요소의 참조값을 배열에 담아오기
// const as = document.querySelectorAll("#myDrop a");
// // 반복문 돌면서 이벤트 리스너 등록
// for(let i=0; i<as.length; i++) {
// as[i].addEventListener("click", (e)=>{
// document.querySelector("#btn0").innerText = e.target.innerText
// });
// }
// // 아이디가 myDrop 인 요소의 자손중에서 모든 a 요소의 참조값을 배열에 담아오기
// const as=document.querySelectorAll("#myDrop a");
// //반복문 돌면서 이벤트 리스너 등록
// for(let i=0; i<as.length; i++){
// as[i].addEventListener("click", (e)=>{
// //이벤트가 일어난 요소의 innerText 읽어오기
// let menu=e.target.innerText;
// document.querySelector("#myDrop button").innerText=menu;
// });
// }
document.querySelectorAll("#myDrop a").forEach((item)=>{
//item 은 각각의 a요소의 참조값 (배열에 저장된 값)
item.addEventListener("click", (e)=>{
let menu=e.target.innerText;
document.querySelector("#myDrop button").innerText=menu;
});
});
</script>
</body>
</html>
Dropdown button 을 클릭하면 아래와 같이 항목이 보여진다.
Dropdown button에 아직 동작을 추가 하지 않았기 때문에 항목을 클릭해도 아무런 동작이 없다.
메뉴 선택 dropdown에는 항목을 클릭하면 해당 항목으로 고정되게 보여지는 동작을 설계하였다.
클릭한 항목으로 button 글자가 변경된다.
'CSS' 카테고리의 다른 글
| Transition (1) (1) | 2023.07.11 |
|---|---|
| Bootstrap Popover 디자인 및 동작 (0) | 2023.06.14 |
| Bootstrap Alert 디자인 및 동작 (0) | 2023.06.09 |
| Bootstrap Form 디자인(2) (0) | 2023.06.08 |
| Bootstrap Form 예제(정규 표현식 활용) (0) | 2023.06.08 |
