Javascript 使用“向上滑动”按钮单击时保持引导3下拉列表打开；向下动画

我使用一个引导下拉菜单作为垂直菜单，它来自于在导航栏上单击的按钮。我添加了一些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>

切换导航

任何帮助都将不胜感激

见