728x90
반응형
이런 Navbar가 있다. 오른쪽에 상병마크 버튼을 누르면
이렇게 메뉴리스트가 튀어나오도록 만들어 보자.
<body>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand">Navbar</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
<script>
document.getElementsByClassName('navbar-toggler-icon')[0].addEventListener('click',function(){
document.getElementsByClassName('list-group')[0].classList.toggle('show');
})
</script>아래 스크립트태그를 보자.
우선 내브바에 있는 상병마크에 이벤트 리스너를 추가한다.(클릭 시 동작)
(여기서 getElementByClassName('클래스명')[0] 이라고 적었는데,
나중에 오류가 발생하지 않도록 인덱스번호를 적어주는 편이 좋다.)
이벤트리스너 function 내부에는
.classList.toggle('클래스명') 이라는 메소드를 사용하였는데,
해당 클래스가 있으면 삭제하고, 없으면 추가하라는 메소드이다.
이것을 이용해서 클래스를 추가하고 뺄 수 있다.
여기서는 show라는 클래스를 toggle하였는데,
show에는 display: block 속성이 들어있어서, 클릭할 때마다 메뉴창이 생기고 사라지게 할 수 있는 것이다.
document.querySelector('.navbar-toggler-icon').addEventListener('click',function(){
document.querySelector('.list-group').classList.toggle('show');
});스크립트 부분에서 getElementByClassName 대신에 querySelector을 사용할 수 있다.
인자로는 CSS문법에 맞게 .클래스명이나 #id 를 주면 된다.
querySelector는 맨 위에있는 요소 하나만 찾는데,
querySelectorAll('요소')[2] 와 같은 형식으로 인덱스를 붙여 사용할 수 있다.
728x90
반응형
'웹개발 > JavaScript' 카테고리의 다른 글
| [자바스크립트] 변수를 이용하여 다크모드 버튼 만들어 보기 (0) | 2023.01.19 |
|---|---|
| [자바스크립트] 모달창 띄우기와 간단한 애니메이션 (0) | 2023.01.18 |
| [자바스크립트] 조건문 사용하기 (0) | 2023.01.18 |
| [자바스크립트] jQuery 라이브러리 사용하기 (0) | 2023.01.16 |
| [자바스크립트] 알림창 띄우기, 이벤트리스너 (0) | 2023.01.16 |
댓글