单击向上滑动时保持Bootstrap 3下拉打开＆amp;动画

Question

我使用Bootstrap下拉列表作为垂直菜单来自点击导航栏上的按钮。我添加了一些jQuery以允许下拉菜单顺利滑下而不是弹出，但现在我遇到了点击任何（内部或外部）时下拉关闭的问题。

下拉菜单中的某些“链接”实际上是手风琴风格的标题，在点击时会显示一个页面列表，因此我需要下拉列表以便在点击内时保持打开状态。

我的主要问题是我找到了一些有效的解决方案，但它们似乎覆盖了下拉列表的平滑幻灯片功能。

这是我用于下滑的代码：

$('.dropdown').on('show.bs.dropdown', function(e){
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});

$('.dropdown').on('hide.bs.dropdown', function(e){
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp();

});

这是我菜单的一般结构：

<div class="dropdown">
    <button type="button" class="dropdown-toggle nav-tog" id="dropdownMenu1" data-toggle="dropdown">
        <span class="sr-only">Toggle navigation</span>
        <i class="fa fa-bars" style="color: #A05317; font-size: 30px;"></i>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" id="mainMenu">
            <ul id="main-nav">
                <li class="nav-item"><a href="#">NAV HEADER (accordion)</a>
                    <ul>
                        <li><a href="#">Sub Nav 1</a></li>
                        <li><a href="#">Sub Nav 2</a></li>
                        <li><a href="#">Sub Nav 3</a></li>
                        <li><a href="#">Sub Nav 4</a></li>
                    </ul>
                </li>
                <li class="nav-item"><a href="#">NAV HEADER (accordion)</a>
                    <ul>
                        <li><a href="#">Sub Nav 1</a></li>
                        <li><a href="#">Sub Nav 2</a></li>
                        <li><a href="#">Sub Nav 3</a></li>
                        <li><a href="#">Sub Nav 4</a></li>
                    </ul>
                </li>
                <li class="nav-item"><a href="#">NAV HEADER</a></li>
                <li class="nav-item"><a href="#">NAV HEADER</a></li>
                <li class="nav-item"><a href="#">NAV HEADER</a></li>
                <li class="nav-item"><a href="#">NAV HEADER</a></li>
                <li class="nav-item"><a href="#">NAV HEADER (accordion)</a>
                    <ul>
                        <li><a href="#">Sub Nav 1</a></li>
                        <li><a href="#">Sub Nav 2</a></li>
                        <li><a href="#">Sub Nav 3</a></li>
                        <li><a href="#">Sub Nav 4</a></li>
                    </ul>
                </li>
             </ul>
        </ul>
    </div>

非常感谢任何帮助！