내일배움캠프 Day 22

버튼 토글 구현

 

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

</style>

<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')[0].addEventListener('click',()=>{
            document.getElementsByClassName('list-group')[0].classList.toggle('show');
        })
    </script>

css파일에 ('navbar-toggler')[0] 클래스를 display:none 으로 하고  

('show') 라는 클래스에 display:block 을 작성한뒤

 

이벤트 리스너를 사용하여  ('navbar-toggler')[0]클래스를 클릭하면,

 ('show') 라는 클래스가 토글 기능을 수행함.

 

 

 

 참고

 

document.getElementsByClassName('navbar-toggler')[0] 은

 

document.querySelectorAll('.navbar-toggler')[0]과 같읕 값을 보여줌 

 

document.querySelector는 첫번째로 발견되는 값을 보여줌