Nav内容表展开和折叠引导带4

Question

我有一个问题，使“内容表”展开和折叠一个按钮在引导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

要使边菜单动画化，您必须创建一个transformation并使用translateX(100%);滑动菜单。然后，您可以添加一个transition: all 300ms;以产生滑动效果。

您还需要更改边菜单的宽度，因为您正在滑动，所以内容填补了边菜单的空间。

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

Answer 2

我在jQuery中添加了一些动画，并添加了按钮和一些引导类，以将您的主要内容带到中心。

下面是jQuery方法：

$(function() {
  $("#toc-button").click( function() {
    $(".post-toc").stop(true).animate({width:'toggle'}, 400);
  });
});

这里的例子：https://codepen.io/evelyng/pen/XWWWqYg