사이드바 하위 메뉴 클릭하면 나오고 클릭하면 사라지는 기능

사이드바 하위 메뉴 클릭하면 나오고 클릭하면 사라지는 기능  (feat 부트스트랩, javascript)

부트스트랩 5와 javascipt 코드를 활용하여 사이드바 메뉴를 만든 예시 코드입니다. 부트스트랩 5는 사이드바 스타일을 고정하기 위해 사용하였으며, javascript는 마우스 클릭에 따라 메뉴가 사라지고 나타나는 동작에 관여합니다.

 

See the Pen 하위메뉴 open close by hyunho (@momalcy) on CodePen.

 

위 코드는 document.getElementById 객체에 style.display 매소드를 사용하였습니다. style.display 에서 주로 사용하는 옵션은 none, block이고 none 은 해당 내용을 제거하기 위해 사용되고 block은 다시 보여주기 위해 사용됩니다. 위 기능을 사용한 코드팬 예시는 아래와 같습니다.

See the Pen style.display by hyunho (@momalcy) on CodePen.