创建可折叠侧面导航栏

Question

我正在创建一个API文档页面，并且我希望侧面导航是可折叠和可扩展的。当我将鼠标悬停在链接上时，API分为几部分，而没有展开的主菜单，因此用户可以选择子菜单链接。

因此，添加侧面导航当前全部展开并超过屏幕底部的那一刻。我想要这样，以便默认情况下它们折叠不同类型api的主菜单按钮全部折叠。

当用户将鼠标悬停在端点按钮上时，菜单将展开以显示子菜单按钮。

例如，在下图中，GET One...的链接将折叠在One下，直到用户将鼠标悬停在One上，此时导航栏将展开以显示{{ 1}}链接

当前外观：

HTML：

GET...

JS：

<li class="nav-link-bottom">
    <a href="#One">One</a>
    <ul>
        <li class="nav-link-bottom sub-menu">
            <a href="#get-One.One">GET One.One</a>
        </li>
        <li class="nav-link-bottom sub-menu">
            <a href="#get-One.Two">GET One.Two</a>
        </li>
        <li class="nav-link-bottom sub-menu">
            <a href="#get-One.Three">GET One.Three</a>
        </li>
        <li class="nav-link-bottom sub-menu">
            <a href="#get-One.Four">GET One.Four</a>
        </li>

    </ul>
</li>
<li class="nav-link-bottom">
    <a href="#Two">Two</a>
    <ul>
        <li class="nav-link-bottom sub-menu">
            <a href="#get-Two.One">GET Two.One</a>
        </li>
        <li class="nav-link-bottom sub-menu">
            <a href="#get-Two.Two">GET Two.Two</a>
        </li>
    </ul>
</li>

css：

<script>
$(".sidebar ul li a").on("click", function () {
    $(".sidebar ul li a").removeClass("active");
    $(this).addClass("active");
});
</script>