如何通过JavaScript过渡效果实现HTML垂直滑动栏？代码问题修正

需求：点击内容为「Equations of Circle」的td元素，显示id为myDownnav的div下的四个链接。现有代码运行后出现以下问题：

• 未点击td时，四个链接已提前显示；
• 点击td后，仅背景发生变化，链接无正常滑动显示效果；
• 多次点击后，无法隐藏链接。
  注：已知内联onclick不推荐使用，接受优化建议。

1. 初始状态链接提前显示：.sidenav仅设置height:0，但未添加overflow:hidden，链接默认可见；且初始时元素的行内style.height为空字符串，不是0，导致判断逻辑失效。
2. 无滑动效果：使用height:100%无法准确计算容器实际高度，过渡动画无法正常触发。
3. 无法切换隐藏：判断条件z.height==0逻辑错误，初始值为空，点击后设置为'100%'，后续判断无法正确切换状态。

以下是修复并优化后的代码：

HTML #

<table>
  <tr>
    <td class="nav-trigger">Equations of Circle
      <div id="myDownnav" class="sidenav">
        <a>General Info</a>
        <a>In Polar Coordinates</a>
        <a>From two end-points of the diameter</a>
        <a>Passing through three points</a>
      </div>
    </td>
  </tr>
</table>

CSS #

.sidenav{
  height: 0;
  width: 100%; 
  position: relative; 
  z-index: 10;
  top: 0; 
  left: 0;
  background-color: rgba(0,0,0,0.6);
  transition: height 0.5s ease;
  overflow: hidden; /* 初始状态隐藏超出容器的链接 */
}

.sidenav a {
  padding: 10px;
  text-decoration: none;
  font-size: inherit;
  color: lightsteelblue;
  display: block;
  transition: background-color 0.3s;
  background-color: rgba(0,0,0,0.5);
}

.sidenav a:hover {
  background-color: rgba(0,0,0);
}

/* 激活类：控制导航展开 */
.sidenav.active {
  height: auto; /* 自动适配内容高度，保证动画正常 */
}

.nav-trigger {
  cursor: pointer; /* 提示用户该元素可点击 */
}

JavaScript #

// 获取触发元素和导航容器
const trigger = document.querySelector('.nav-trigger');
const downNav = document.getElementById('myDownnav');

// 添加点击事件监听，替代内联onclick
trigger.addEventListener('click', () => {
  // 通过切换类实现显示/隐藏切换
  downNav.classList.toggle('active');
});

• 移除内联onclick，改用事件监听，符合现代前端开发规范；
• 新增overflow:hidden确保初始状态下链接被隐藏；
• 使用CSS类切换控制状态，逻辑更清晰，避免直接操作行内样式的混乱；
• 展开时用height:auto自动适配内容高度，解决100%高度导致的动画失效问题；
• 给td添加cursor:pointer，提升交互体验。

内容的提问来源于stack exchange，提问作者M.Riyan