下拉菜单不会保持打开引导程序 4

Question

我目前的下拉菜单有问题。我希望它们仅在单击下拉菜单时打开/关闭，而不是列表项或正文中的任何其他位置。

这是我遇到问题的代码：

 <main>
    <div id="wrapper">
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li>
                    <span style="height:50px" />
                </li>
                <li class="dropdown" id="mi1">
                    <a class="menu-toggle" href="#" class="dropdown-toggle" data-toggle="dropdown">Service Provision<span class="fa fa-chevron-down pull-right sideMenuChevrons"></span></a>
                    <ul class="sideDropDown dropdown-menu" role="menu">
                        <li><a href="#">Service Provision<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></a></li>
                        <li><a href="#">Automation Requests<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a class="menu-toggle" href="#" class="dropdown-toggle" data-toggle="dropdown">NMC<span class="fa fa-chevron-down pull-right sideMenuChevrons"></span></a>
                    <ul class="sideDropDown dropdown-menu" role="menu">
                        <li><a href="#">Customers<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></a></li>
                        <li><a href="#">Contractors<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></a></li>
                        <li><a href="#">Suppliers<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a class="menu-toggle" href="#" class="dropdown-toggle" data-toggle="dropdown">Site Access<span class="fa fa-chevron-down pull-right sideMenuChevrons"></span></a>
                    <ul class="sideDropDown dropdown-menu" role="menu">
                        <li><a href="#">Site Access<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></a></li>
                        <li><a href="#">Key Issue<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></a></li>
                    </ul>
            </ul>
            <div class="dropup">
                <a id="menu-toggle-reversed" href="#" class="dropdown-toggle dropup" data-toggle="dropdown"><i id="adminIconPadding" class="fa fa-user-md"></i>Admin<span class="fa fa-chevron-up pull-right sideMenuChevronsDropUp"></span></a>
                <ul id="adminDropup" class="dropdown-menu" role="menu">
                    <li><a href="#">Settings<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></a></li>
                </ul>
            </div>
        </div>

我尝试将内联 javascript 添加到“stopPropagation”，但这导致下拉菜单根本无法打开。

这是左侧导航栏中下拉菜单发生的情况的粗略 jsfiddle：https://jsfiddle.net/jr_iridium/aqLa77ax/

我对引导程序比较陌生，所以如果我犯了任何错误，请告诉我。

提前致谢。

Answer 1

这是我的答案，经过长时间的测试，因为我曾经使用 Boostrap 3。删除data-toggle="dropdown" 是在外部点击期间删除自动关闭的唯一方法。与here 相关，但您的问题是 Bootstrap 4

试试这个：

https://jsfiddle.net/rigz/pdc4un6L/5/

如果小提琴不起作用，请告诉我，我在小提琴中遇到了奇怪的问题，因为我在公司代理下发布这个：P