Twitter bootstrap 快速展开子菜单动画

JSFIDLE示例：

有人知道如果你点击“导航点+”按钮，我如何使动画平滑开始。现在，下面的主菜单点变成了动画抖动。动画应与再次折叠子菜单时一样平滑

<div class="col-xs-6 col-sm-3 sidebar-offcanvas">
    <div class="offcanvas-navi">
        <ol>
            <li class="primary-nav-points"><a href="#"><i class="fa fa-dashboard fa-3x"></i><span class="offcanvas-navi-text">Nav Point</span><i class="fa fa-angle-right fa-2x"></i></a></li>
            <li class="primary-nav-points"><a href="#"><i class="fa fa-user fa-3x"></i><span class="offcanvas-navi-text">Nav Point</span><i class="fa fa-angle-right fa-2x"></i></a></li>
            <li class="primary-nav-points"><a href="#"><i class="fa fa-th-large fa-3x"></i><span class="offcanvas-navi-text">Nav Point +</span><i class="fa fa-angle-right fa-2x"></i></a>
                <ol class="sub-menu-l1 hide-sub-menu">
                    <li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></i></a>
                    <li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></i></a>
                    <li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></i></a>
                    <li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></a>
                    <li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></a>
                    <li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></a>
                    <li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></a>
                    <li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></a>
                    <li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></a>
                    <li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></a>
                    <li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></a>
                    <li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></a>
                    <li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></a>
                    <li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></a>
                    <li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></a>
                    <li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></a>
                    <li><a href="#"><i class="fa fa-angle-right fa-2x"></i><span class="offcanvas-navi-text-l1">Sub Nav Point</span></a>
                </ol>
            </li>
            <li class="primary-nav-points"><a href="#"><i class="fa fa-lightbulb-o fa-3x"></i><span class="offcanvas-navi-text">Nav Point</span><i class="fa fa-angle-right fa-2x"></i></a></li>
            <li class="primary-nav-points"><a href="#"><i class="fa fa-dot-circle-o fa-3x"></i><span class="offcanvas-navi-text">Nav Point</span><i class="fa fa-angle-right fa-2x"></i></a></li>
            <li class="primary-nav-points"><a href="#"><i class="fa fa-users fa-3x"></i><span class="offcanvas-navi-text">Nav Point</span><i class="fa fa-angle-right fa-2x"></i></a></li>
            <li class="primary-nav-points"><a href="#"><i class="fa fa-shopping-cart fa-3x"></i><span class="offcanvas-navi-text">Nav Point</span><i class="fa fa-angle-right fa-2x"></i></a></li>
            <li class="primary-nav-points"><a href="#"><i class="fa fa-flash fa-3x"></i><span class="offcanvas-navi-text">Nav Point</span><i class="fa fa-angle-right fa-2x"></i></a></li>
            <li class="primary-nav-points"><a href="#"><i class="fa fa-area-chart fa-3x"></i><span class="offcanvas-navi-text">Nav Point</span><i class="fa fa-angle-right fa-2x"></i></a></li>
        </ol>
    </div>
</div> <!--/.sidebar-offcanvas-->

---

不要添加类来隐藏ol，而是尝试从css/jquery中隐藏它，并使用toggle隐藏。显示列表

我已经从html中删除了隐藏子菜单类

 $(".primary-nav-points > ol").hide();
    $('.primary-nav-points').click(function () {
        $(this).find("ol").toggle("500");
    })

---

通过遵循问题的答案，我能够创建目标动画

更新的JSFIDLE示例可在

相关的变化是：

$('.primary-nav-points').click(function () {
    $('ol', this).toggleClass('activate-sub-menu');
})

及

---

感谢所有支持我的人

谢谢你的建议，但动画仍然不是它应该的样子。动画应与再次折叠子菜单时一样平滑。在我的example@HH. 我没有使用引导等，但有一个在没有抖动显示相同的动画看看。在我的使用中，我将动画速度提高了100毫秒，并添加了边框：0px实心透明以规则标签跨度、标签跨度：之前、标签跨度：之后以平滑线条。

ol.sub-menu-l1 {
  max-height: 0px;
  transition: max-height 0.5s ease-out;
  overflow: hidden;
}

ol.activate-sub-menu {
  max-height: 500px;
  transition: max-height 0.5s ease-in;
}