6. 서브메뉴 만들기, class List

부트스트랩 CDN

 <!-- 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 rel="stylesheet" href="./index06.css">
    
<!-- Option 1: Bootstrap Bundle with Popper -->
    <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>

 

서브메뉴 만들기

   <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> 

      <!-- 서브메뉴 -->
      <!-- class 탈부착식으로 개발시 1.애니메이션 추가 쉬움 , 2.나중에 재사용 편리 -->
      <!-- class에 show가 없으면 안보이고 show가 부착되면 나오게 -->
      <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>

 

.list-group{
    display: none;
}

.show{
    display: block;
}

        // sub 메뉴 보이기
        // 버튼을 누르면 <ul>에 show를 부착
        document.getElementsByClassName('navbar-toggler')[0].addEventListener('click',
        function(){
            // navbar-toggle을 클릭하면 list-group에 class show를 추가해주세요
            document.getElementsByClassName('list-group')[0].classList.toggle('show') ;

        })

        // 버튼 한번 더 누르면 숨기기 -> add대신 toggle
        // toggle : 있으면 제거, 없으면 추가

        // 셀렉터 종류
        // getElementById(), getElementsByClassName()
        // querySelector(), querySelectorAll()

        document.querySelector('.list-group')
                            // css문법으로 쓸 수 있는 셀렉터
                            // class는 ., id는 # 으로 선택

class 탈부착식으로 만들기

1. 에니메이션 추가가 쉬워짐

2. 재사용성 편리

 

querySelector() -> 젤 위 하나만 찾아줌     
querySelectorAll() -> 해당하는 요소를 모두 찾아줌

 

---

숙제

위 코드를 querySelector(), querySeletorAll()로 바꾸기

 

 document.querySelector('.navbar-toggler').addEventListener('click',
    function(){
            document.querySelector('.list-group').classList.toggle('show') ;
        	})