当 max-height 属性动态变化时，最大高度转换不起作用答案

【问题标题】：Max height transition is not working when the max-height property change dynamically当 max-height 属性动态变化时，最大高度转换不起作用
【发布时间】：2021-09-01 14:40:22
【问题描述】：

document.querySelectorAll('.sidebarCategory').forEach(el =>{
      el.addEventListener('click', e =>{
          let sub = el.nextElementSibling
          if(sub.style.maxHeight){
              el.classList.remove('opened')
              sub.style.maxHeight=null
          }
          else{
              document.querySelectorAll('.sidebarSubcategories').forEach(element => {
                  element.style.maxHeight=null
                  element.previousElementSibling.classList.remove('opened')
              })
              el.classList.add('opened')
              sub.style.maxHeight = sub.scrollHeight + "px";
          }
      })
  })
  document.querySelectorAll('.sidebarSubcategories > div:not(.sidebarSubSubcategories)').forEach(el =>{
      el.addEventListener('click', e =>{
          let sub = el.nextElementSibling
          if(sub!=null && sub.classList.contains('sidebarSubSubcategories'))
          {
              if(sub.style.maxHeight){
                  sub.style.maxHeight=null
                  sub.style.marginBottom=0
                  sub.style.padding='0 30px'
              }
              else{
                  sub.style.marginBottom='15px'
                  sub.style.padding='15px 30px'
                  sub.style.maxHeight = sub.scrollHeight + 30 + "px"
                  el.parentNode.style.maxHeight=el.parentNode.style.maxHeight.slice(0,el.parentNode.style.maxHeight.length-2) + sub.scrollHeight + 30 + "px"
              }
          }
      })
  })

.main{
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: 400px;
      height: 300px;
      overflow-y: auto;
      background-color: aquamarine;
  }
  .sidebarCategory{
      color: white;
      position: relative;
      height: 60px;
      min-height: 60px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      font-size: 20px;
      flex-wrap: wrap;
      font-weight: 600;
      fill: white!important;
      cursor: pointer;
      padding-left: 15px;
      transition: 0.4s;
  }
  .sidebarCategory.opened{
      background-color: rgba(3, 63, 109, 0.588);
  }
  .sidebarSubcategories{
      max-width: 100%;
      position: relative;
      background-color: rgba(3, 63, 109, 0.588);
      max-height: 0;
      transition: 0.4s;
      overflow-y: hidden;
  }
  .sidebarSubcategories > div:not(.sidebarSubSubcategories){
      max-height: 45px;
      /* height: 45px; */
      position: relative;
      min-height: 45px;
      color: white;
      cursor: pointer;
      overflow-y: hidden;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      padding: 0 30px;
      border-bottom: 1px solid var(--blue);
  }
  .sidebarSubSubcategories{
      max-height: 0;
      overflow-y: hidden;
      transition: 0.4s;
      background-color: white;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      margin: 0 15px;
  }
  .sidebarSubSubcategories > div{
      cursor: pointer;
      transition: 0.2s;
      display: flex;
      justify-content: center;
      border-radius: 5px;
      align-items: center;
      padding: 10px;
      width: 49%;
  }
  .sidebarSubSubcategories > div:hover{
      background-color: #f3f3f3;
  }

<body>
    <div class="main">
        <div class="sidebarCategory">
            Lorem ipsum dolor sit amet.
        </div>
        <div class="sidebarSubcategories">
            <div>
                Subcategory
            </div>
            <div class="sidebarSubSubcategories">
                <div>Sub Subcategory</div>
                <div>Sub Subcategory</div>
                <div>Sub Subcategory</div>
                <div>Sub Subcategory</div>
            </div>
            <div>
                Subcategory
            </div>
            <div>
                Subcategory
            </div>
            <div>
                Subcategory
            </div>
        </div>
    </div>
</body>

查看代码，如果我与第二个下拉菜单交互，第一个下拉菜单不会顺利关闭。我正在更改 max-height 属性以创建手风琴。我在手风琴里面放了另一个手风琴。但是当我与内部手风琴交互时，外部手风琴的过渡不起作用。

【问题讨论】：

标签： javascript css css-transitions

【解决方案1】：

看起来问题是这一行 el.parentNode.style.maxHeight.slice(0,el.parentNode.style.maxHeight.length-2) + sub.scrollHeight...."

您添加的字符串和数字将始终连接，因此“123”+ 4 = 字符串“1234”。您需要解析为 int（您也不需要切掉 px）

//Instead of 
el.parentNode.style.maxHeight.slice(0,el.parentNode.style.maxHeight.length-2)
//Do this            
parseInt(el.parentNode.style.maxHeight)

【讨论】：

【解决方案2】：

我认为问题在于sidebarSubcategories 元素没有定义的高度。它有一个 max-heigth 或 0，然后通过 JavaScript 设置为 null。

height 的默认值为auto，因此，当您将maxHeight 设置为null 时，您将max-height 设置为auto，并且转换不适用于auto 值。那是因为浏览器不知道要转换到哪个值。如果你真的需要这个并且你不能先验地设置每个sidebarSubcategories'height，你需要存储每个sidebarSubcategories的innerHeight（当它被扩展时）并在再次扩展时应用它。

【讨论】：

如果你是对的，那么其他过渡也不会起作用。只有在与内部子菜单交互后，外部转换才会停止工作。
其实问题是我写了搞笑的JavaScript，增加高度会增加另一个问题，所以我没有故意添加它