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

问题描述：

我目前有我的下拉菜单的问题。我希望他们仅在点击下拉菜单时才打开/关闭，而不是列表项或主体中的任何其他位置。下拉菜单不会保持打开引导4

这里是我有问题我的代码：

<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/

我是比较新的引导，所以请让我知道如果我犯任何错误。

在此先感谢。

创建一个工作演示，显示问题 – Dekel

@Dekel JSFiddle现在添加到原始帖子。 – jrobson

你在说你的边栏菜单吗？或导航菜单？ – threeFatCat

答

这是我的答案，经过长时间的测试，因为我曾经用Boostrap 3.通过删除data-toggle="dropdown"是消除外部点击过程中自动关闭的唯一方法。相关here但你的问题是引导4

试试这个：

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

如果拨弄不工作只是让我知道，我有在拨弄奇怪的问题，因为我下公司代理发布此：P

对不起，回复晚了，长周末！我试过了小提琴，下拉菜单根本没有打开？ – jrobson

你可以尝试删除每个下拉菜单中的'toggle =“dropdown”'并使用jsfiddle中的jquery吗？它在我的本地工作正常，这就是为什么我发布这个答案时感到奇怪。 – threeFatCat

或者你可以复制并粘贴代码，我只是确保你有正确的引导和jQuery库和CSS。我只想确认它是否完全无效，如果没关系。谢谢 – threeFatCat

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

相关推荐