有人知道我如何在stripe文档页面上实现sidenav吗https://stripe.com/docs侧导航有嵌套的元素。我想知道如何点击主页上的"支付"，打开支付端导航及其嵌套列表，并重定向到支付页面。我知道这没有意义，但如果你点击文档页面并尝试，你可能会理解我想要实现的目标。
使用CSS高度转换可以实现类似的行为。它们在桌面上看起来相当流畅(60fps是可以实现的，但不能通过整个过渡期(。如果您需要更多的控制(例如，当其他导航打开时关闭其他导航的ul(，您可以删除复选框元素并将标签元素更改为"h2"。然后在JS代码中的"h2"元素上设置"onclick"监听器，该监听器将向选定的"ul"添加class(样式从"input:checked~ul"(。
:root {
--liHeight: 1em
}
label {
cursor: pointer
}
ul {
opacity: 0;
height: 0px;
overflow: hidden;
transition: 0.3s;
}
ul li {
height: var(--liHeight);
}
input {
position: absolute;
opacity: 0;
}
input:checked ~ ul {
opacity: 1;
position: initial;
height: calc(7 * var(--liHeight));
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="item">
<label for="item1">
Item 1
</label>
<input id="item1" type="checkbox"/>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
<div class="item">
<label for="item2">
Item 2
</label>
<input id="item2" type="checkbox"/>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
<div class="item">
<label for="item3">
Item 3
</label>
<input id="item3" type="checkbox"/>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</body>
</html>另一种解决方案是编写JS动画，例如使用"window.requestAnimationFrame"API来动画"ul"元素的高度。(我认为这就是stripe.com上正在发生的事情(