코딩짜는 일상

[Javascript & jQuery] 애니메이션 메뉴 접기/펴기(collapse) - 아코디언 메뉴 본문

IT/Javascript&Jquery

[Javascript & jQuery] 애니메이션 메뉴 접기/펴기(collapse) - 아코디언 메뉴

Remily 2022. 9. 29. 17:34
반응형

메뉴의 서브메뉴를 숨겼다 펼치거나

특정 목차의 컨텐츠 내용을 접었다 펼칠 때

주로 collapse 또는 아코디언을 검색합니다.

 

찾아보시면 여러가지 방법을 소개하고 있지만 일단 이 글에선

Javascript와 jQuery를 쓰는 방식을 비교해보고자 합니다.

먼저 HTML은 다음과 같습니다.

HTML

<style>
  body{
    width: 100%; height: 100%;
    margin: 0; padding: 0;
    display: flex; justify-content: center; align-items: center;
  }
  ul, li{
    padding: 0;
    list-style: none;
    text-align: center;
  }
  .collapse{
    width: 150px;
    background-color: #ff9800;
  }
  .sub{
    background-color: #ffeb3b; 
  }
</style>

<body>
<ul class="collapse">
  <li class="item">
    <h3>main 1</h3>
    <ul class="sub">
      <li>sub 1</li>
      <li>sub 2</li>
      <li>sub 3</li>
    </ul>
  </li>
</ul>
</body>

 

 

 

Javascript

먼저 자바스크립트 입니다.

 

서브 메뉴의 max-height를 0으로 만들거나

원래 높이로 되돌리는 방식으로

접었다 폈다 하는 컨셉입니다.

 

<style>
.sub{ /* 추가! */
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s ease-out; 
  } 
</style>

<!-- body 최하단에 붙여넣기 -->
<script>
  const Btn = document.querySelector('#btn');
  Btn.addEventListener('click', function(){
    const subMenu = this.parentNode.querySelector('.sub');
    if(subMenu.style.maxHeight){
      subMenu.style.maxHeight = null;
    } else{
      subMenu.style.maxHeight = subMenu.scrollHeight + 'px';
    }
  });
</script>

 

sub 클래스 스타일에 transition을 추가해주지 않으면

애니메이션 없이 팟 나타났다가 팟 사라집니다.


주의!!

 

 

 

jQuery

마지막으로 제이쿼리 입니다.

 

자바스크립트보다 코드가 훨씬 짧아졌습니다!

 

서브 메뉴를 display: none;으로 숨겨둔 다음

slideToggle()로 펼쳤다 접었다 합니다.

 

<style>
.sub{ /* 추가! */
    display: none;
  } 
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>


<body>
<ul class="collapse">
  <li class="item">
      <!-- a테그 수정해주기 -->
    <a id="btn" href="javascript:;" onclick="$(this).closest('.item').find('.sub').slideToggle('fast');"><h3>main 1</h3></a>
    <ul class="sub">
      <li>sub 1</li>
      <li>sub 2</li>
      <li>sub 3</li>
    </ul>
  </li>
</ul>
</body>

 

 

이렇게 둘을 비교하니까...

 

왜 웹 개발할 때 jQuery를 쓰는지 확 와닿네요...ㅎㅎ

 

 

 

 

 

추가로 아래 사이트를 참고하여

javascript 버젼을 작성하였습니다!

 

https://www.w3schools.com/howto/howto_js_collapsible.asp

 

How To Create a Collapsible

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

반응형
저작자표시

'IT > Javascript&Jquery' 카테고리의 다른 글

[Javascript] 가격 표시, 천단위 콤마 정규식 + 숫자만 가져오기 정규식  (1) 2024.01.24
[javascript, ajax] 함수에서 ajax 결과값이 반환되지 않을 때_async 옵션  (0) 2023.10.19
[Javascript] console.log 동작 안 하는 이유 - filter  (0) 2023.06.26
[Javascript+html] scrollTo 안 먹히는 이유 - 찔끔 움직이고 끝나는 이유 / 움직일 스크롤 특정  (0) 2022.07.29
[Javascript] confirm : alert 확인 or 취소 구현하기  (0) 2022.06.30
'IT/Javascript&Jquery' Related Articles more