애니메이션이 작동을 안합니다..

[랄지]

  title을 누르면 하위 side_submenu를 toggle형식으로 보여주려는데
side_submenu에다가 classList에 show-submenu를 추가해서
show-submenu에다가 높이를 주고 visible: visibility 형식의 애니메이션을 줄려고하는데
작동을 하지않습니다. ㅠㅠ
class는 잘 추가가 되는데 side__submenu의 초기값 visible: none; 이 계속 적용되네요
side__submenu  show-submenu 동시에 적용되면 visiblity로 바껴야하는거아닌가요 ? ㅠㅠ
height 도 0인상태 그대로입니다.

   <div class="side-bar__menu">
            <ul class="side__menu">
              

                <div class="side__title">병원</div>
                <div class="side__submenu">
                  

                    
원장 인사말
                    
의료진 소개
                    
병원 미리보기
                  
                </div>
              
              

                <div class="side__title">병원 이용안내</div>
                <div class="side__submenu">
                  

                    
예약 및 진료시간 안내
                    
찾아오시는 길
                    
주차안내
                  
                </div>
              
              
<div class="side__title">특화진료</div>
  
              
<div class="side__title">커뮤니티</div>
            
          </div>

<hr />

.side-bar__menu .side__title {
  border-bottom: 0.5px solid #c8c8c8;
  padding: 25px;
  font-weight: 550;
}
.side-bar__menu .side__submenu {
  /* cursor: pointer; */
  color: darkolivegreen;
  font-size: 16px;
  font-weight: 550;
  width: 100%;
  border-bottom: 0.5px solid #c8c8c8;
  transition: all 1s;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.show-submenu {
  height: 400px;
  background-color: #aaa;
  visibility: visible;
}

<hr />

  const sideTitleEls = document.getElementsByClassName("side__title");
  const submenuEl = document.getElementsByClassName("side__submenu");

  for (let i = 0; i < sideTitleEls.length; i++) {
    sideTitleEls[i].addEventListener("click", function () {
      const submenu = this.nextElementSibling;
      if (submenu && submenu.classList.contains("show-submenu")) {
        submenu.classList.remove("show-submenu");
      } else {
        submenu.classList.add("show-submenu");
      }
    });
  }

 

• 이 게시글은 랄지에 의해 1 년 전에 수정됐습니다.
• 이 게시글은 랄지에 의해 1 년 전에 수정됐습니다.

[codingapple]

.show-submenu { 부분이 specificity가 더 낮아서 그럴수도요 더 높여봅시다

[글쓴이]

글