实现汉堡菜单点击列表滑出、再次点击平滑收起的效果方法

display 属性属于非动画属性，无法触发CSS过渡效果，因此你之前直接切换display的逻辑无法实现平滑动画，我们需要用height过渡的逻辑替换原有显隐控制逻辑。

1. 修改CSS样式 #

替换你原有代码中.topnav-menu相关的样式，新增过渡规则，调整内边距位置避免收起时出现留白：

.topnav-menu {
    /* Burger Menu Content*/
    width: 100%;
    overflow: hidden;
    background-color: darkblue;
    /* 新增过渡规则，0.3s可自行调整动画时长 */
    transition: height 0.3s ease-in-out;
    /* 默认高度为0，实现隐藏效果 */
    height: 0;
}

.topnav-menu ul {
    /* Burger Menu Content*/
    float: right;
    list-style-type: none;
    /* 把原容器的padding移到ul上，避免height为0时出现留白 */
    padding: 0.09rem 0.30rem;
    /* 清除ul默认margin，避免高度计算偏差 */
    margin: 0;
}

注：过渡缓动函数用ease-in-out即可同时适配展开、收起两种场景，不用分别设置ease-in/ease-out，动画的方向由height值的增减决定，和缓动函数类型无关。

2. 替换JS逻辑 #

替换原有menuToggle函数，用动态切换高度的逻辑替换display切换逻辑：

function menuToggle() {
    var x = document.getElementById("burgerMenu");
    // 如果当前高度为0（收起状态），则设置为内容实际高度实现展开
    if (x.style.height === "0px" || x.style.height === "") {
        x.style.height = x.scrollHeight + "px";
    } else {
        // 否则设为0实现收起
        x.style.height = "0px";
    }
}

这里用scrollHeight动态获取菜单内容的实际高度，不用写死固定高度，适配菜单内容动态变化的场景。

3. 修改HTML默认属性 #

删除原有#burgerMenu上的默认隐藏样式：

<!-- 修改前 -->
<!-- <div class="topnav-menu" id="burgerMenu" style="display: none;"> -->
<!-- 修改后 -->
<div class="topnav-menu" id="burgerMenu">
    <ul>
        <li><a href="#item1">item1</a></li>
        <li><a href="#item2">item2</a></li>
        <li><a href="#item3">item3</a></li>
    </ul>
</div>

内容的提问来源于stack exchange，提问作者Mads Sander Høgstrup