如何用原生JavaScript为CSS类.expand添加计算所得的高度值？

嘿，我完全懂你卡在哪了——要把计算出来的高度值注入到.expand这个CSS类里对吧？其实咱们可以通过JavaScript直接操作CSS样式表来搞定这个问题，毕竟CSS过渡本身不支持height: auto，必须用具体的像素值才能触发动画。

下面是调整后的完整代码，我会把关键步骤标注清楚：

HTML代码（无需修改） #

<ul class="dropdown-parent"> 
  <li><a>Link</a></li> 
  <li> 
    <a>Link</a> 
    <ul class="dropdown"> 
      <li>Link</li> 
      <li>Link</li> 
      <li>Link</li> 
    </ul> 
  </li> 
</ul>

CSS代码（只需保留基础样式） #

.dropdown-parent { 
  position: relative; 
} 
.dropdown { 
  position: absolute; 
  left: 0; 
  top: 100%; 
  height: 0; 
  overflow: hidden; 
  transition: height 1s ease-in-out; 
}
/* .expand 类会通过JS动态生成，不用提前写 */

核心修改：JavaScript代码 #

const dropdownParent = document.querySelector('.dropdown-parent'); 
const dropdownList = document.querySelector('.dropdown'); 

// 先获取下拉菜单的自然高度，然后重置为初始状态
dropdownList.style.height = 'auto'; 
const dropdownHeight = dropdownList.offsetHeight; 
dropdownList.style.height = '0'; 

// 重点！动态创建.expand类并注入计算好的高度
const customStyle = document.createElement('style');
// 这里把高度值拼进CSS规则里，确保.expand类作用在.dropdown上
customStyle.textContent = `.dropdown.expand { height: ${dropdownHeight}px; }`;
// 把这个样式块加到页面头部，让规则生效
document.head.appendChild(customStyle);

// 给父元素加点击事件，切换下拉菜单的.expand类
dropdownParent.addEventListener('click', () => { 
  // 注意：要给.dropdown元素切换类，不是父元素哦！
  dropdownList.classList.toggle('expand'); 
});

关键细节说明： #

1. 为什么要动态创建样式？ 因为我们没法提前知道下拉菜单的具体高度，必须等DOM加载后计算出来，再把这个值写入CSS类中。
2. 点击事件的目标：原来的代码里误给父元素切换类了，咱们要操作的是.dropdown元素，这样过渡动画才会作用在它身上。
3. 过渡原理：当添加.expand类时，.dropdown的height会从0变成计算好的像素值，触发CSS过渡；移除类时则反向过渡回0，完美实现平滑展开/收起效果。

如果之后下拉菜单的内容有动态变化（比如新增/删除选项），只需要重新计算高度并更新.expand类的规则就行啦～

内容的提问来源于stack exchange，提问作者João Santos