下拉菜單不會保持打開引導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/

我是比較新的引導，所以請讓我知道如果我犯任何錯誤。

在此先感謝。

來源

2017-05-26 jrobson

創建一個工作演示，顯示問題 – Dekel

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

你在說你的邊欄菜單嗎？或導航菜單？ – threeFatCat

這是我的答案，經過長時間的測試，因爲我曾經用Boostrap 3.通過刪除data-toggle="dropdown"是消除外部點擊過程中自動關閉的唯一方法。相關here但你的問題是引導4

試試這個：

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

如果撥弄不工作只是讓我知道，我有在撥弄奇怪的問題，因爲我下公司代理髮布此：P

來源

2017-05-26 17:09:15 threeFatCat

對不起，回覆晚了，長週末！我試過了小提琴，下拉菜單根本沒有打開？ – jrobson

你可以嘗試刪除每個下拉菜單中的'toggle =「dropdown」'並使用jsfiddle中的jquery嗎？它在我的本地工作正常，這就是爲什麼我發佈這個答案時感到奇怪。 – threeFatCat

或者你可以複製並粘貼代碼，我只是確保你有正確的引導和jQuery庫和CSS。我只想確認它是否完全無效，如果沒關係。謝謝 – threeFatCat

下拉菜單不會保持打開引導4

回答

相關問題