[JavaScript기초] 6. classList 다루기 (서브메뉴 숨기기)
이전 포스팅에서 bootstrap을 이용하여, Navbar구현하는 법에 대해서 알아보았다.
https://midnightcoding.tistory.com/100
[JavaScript기초] 5. 부트스트랩 사용하는법(bootstrap)
부트스트랩은, 기존에 만들어 놓은 Navbar, tabs, Modal등을 가져와서 구현을 할 수 있는 플랫폼이다. 사용법 1. 구글에 bootstrap을 검색하여, 아래 링크로 들어간다. 2. Bootstrap 웹페이지로 들어가서 상
midnightcoding.tistory.com
이번 포스팅에서는 Bootstrap을 이용하여, Navbar 버튼을 눌러서 서브메뉴를 보여줄수 있도록 해보자
여기에서는 div tag에 class를 탈부착하여, 요소가 보이게 또는 안보이게 만들예정
1. UI 구현 (Navbar + sub menu via bootstrap)
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="main.css" rel="stylesheet">
<title>Hello, world!</title>
</head>
<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 src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>그리고, css파일 (main.css)에 아래와 같이 두 class에 대해서 스타일링 해준다.
.list-group {
/* 서브메뉴 숨기기위해 none */
display: none;
}
.show {
/* show class가 있다면, 화면에 나타나도록 */
display: block;
}
2. 기능 구현
class="show"를 추가하는 코드
<body> tag안에 <script> tag를 넣어주고, 아래 코드를 집어 넣는다.
document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){
document.getElementsByClassName('list-group')[0].classList.add('show');
});즉, class="navbar-toggler" 를 가진 요소를 클릭하게되면,
class="list-group" 인 요소에 show라는 클래스명을 추가하라는 코드이다.
class="show"를 제거하는 코드
그렇다면, 다시 해당 서브메뉴를 안보이게 하고 싶다면?
위에서 부착했던, 'show' 클래스를 다시 제거하면 된다.
document.querySelector('.navbar-toggler').addEventListener('click', function(){
document.querySelector('.list-group').classList.remove('show');
})add를 remove함수로 바꿔주면되는데, toggle() 함수를 사용하게되면 위에 추가하고 제거하는 것을 모두 가능하다.
- 클래스명이 있으면 제거하고
- 클래스명이 없으면 붙여준다.
add(), remove() 대신 toggle() 을 이용한 코드
document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){
document.getElementsByClassName('list-group')[0].classList.toggle('show');
});
querySelector
getElementById()
getElementsByClassName()
이전 포스팅에서 html 요소를 찾아주는 두가지 셀렉터에대해서 다뤄봤는데, 다른 셀렉터도 있습니다.
querySelector인데 아래와 같이 사용가능하다.
<div class="test1">안녕하세요</div>
<div id="test2">안녕하세요</div>
<script>
document.querySelector('.test1').innerHTML = '안녕';
document.querySelector('#test2').innerHTML = '안녕';
</script>
querySelector() 안에는 css 셀렉터 문법을 사용가능합니다.
(css에서 마침표는 class라는 뜻이고 #은 id라는 뜻임)
다만 querySelector() 는 맨 위의 한개 요소만 선택해줍니다.
<div class="test1">안녕하세요</div>
<div class="test1">안녕하세요</div>
<script>
document.querySelectorAll('.test1')[1].innerHTML = '안녕';
</script>▲ 그래서 위처럼 test1이라는 클래스가 중복으로 여러개 있는데
X번째 요소를 선택하고 싶은 경우엔 querySelectorAll() 쓰면 됩니다.
querySelectorAll() 은 해당하는걸 다 찾아서 [ ] 안에 담아줍니다.
그래서 [숫자] 를 뒤에 붙여서 원하는 위치에 있는 요소 찾아쓰면 됩니다.
출처 : 코딩애플 'JavaScript 입문과 웹 UI개발'