습관제작소

22-11-24 JavaScript 서브메뉴 만들기 본문

Programing Language/JavaScript

22-11-24 JavaScript 서브메뉴 만들기

KUDO 2022. 11. 25. 01:20

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">
    <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" id="test1">
        <li class="list-group-item active" aria-current="true">An active 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.querySelectorAll('.list-group-item')[1]


        // 클래스 추가하기
        document.getElementsByClassName('navbar-toggler')[0].addEventListener('click',
        function(){
                document.getElementsByClassName('list-group')[0].classList.toggle('show');
            })                                                             // 있으면 없애고 없으면 붙여주세요
      </script>



    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

  </body>
</html>

CSS

.list-group{
    display: none;
}
.show{
    display: block;
}

'Programing Language > JavaScript' 카테고리의 다른 글

22-11-24 JavaScript jQuery  (0) 2022.11.25
22-11-23 JavaScript addEventListener  (0) 2022.11.23
22-08-21 JavaScript 연산자  (0) 2022.08.21
22-08-15 JavaScript 현재시각  (0) 2022.08.15
22-08-06 JavaScript (나이 계산기)  (0) 2022.08.06
'Programing Language/JavaScript' Related Articles more
Comments