javascript - 导航目录展开和折叠 Bootstrap 4

Question

我在使用 Bootstrap 4 中的按钮展开和折叠“目录”时遇到问题。

这是我的代码: https://codepen.io/nht910/pen/RwwwyKB

片段:

<div class="main-wrapper col-12">
    <div class="post-wrapper">
        <div class="post-body d-flex">
            <div class="post-content">
                <p>...</p>
            </div>

            <div class="post-toc">
                <!-- this table of content i use Boostrap-TOC to auto generate: https://afeld.github.io/bootstrap-toc-->         
                <nav class="sticky-top" id="toc"></nav>
            </div>

        </div>
    </div>
</div>

你们能不能帮我把“目录”放在折叠按钮里，当点击它时，我们有如下图所示的动画。

非常感谢你们。

Answer 1

要为侧边菜单设置动画，您必须进行转换 并使用translateX(100%); 滑动菜单。然后，您可以添加一个 transition: all 300ms; 以获得滑动效果。

您还需要在滑动时更改侧边菜单的宽度，以便内容填充侧边菜单的空间。

我想我达到了你想要的效果，例子如下: https://codepen.io/diogoperes/pen/NWWWMYW