ドロップダウンメニューは開いたままになりません。ブートストラップ4

Question

現在、私のドロップダウンメニューに問題があります。私は、ドロップダウンメニューがクリックされたときにのみ開く/閉じることを欲しています。私は「のstopPropagationが」しかし、これはまったく開かないドロップダウンメニューをもたらしたためにjavascriptのインラインを追加しようとしている

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

：

は、ここで私はとの問題を抱えています私のコードです。 https://jsfiddle.net/jr_iridium/aqLa77ax/

私はので、私は間違いをしたなら、私に知らせてくださいブートストラップするのは比較的新しいです：

はここtehの左のナビゲーションバーでtehのドロップダウンメニューで何が起こっているかの大まかなjsfiddleです。

ありがとうございます。

Answer 1

私はBoostrap 3を使用して以来、長いテストの後、私の答えです。data-toggle="dropdown"を削除することで、外部のクリック時に自動終了を削除する唯一の方法です。 hereに関係なく、あなたの質問には、4

これを試してみてくださいブートストラップです：フィドルがうまくいかない場合

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

はちょうど私が私が下だから、私はフィドルに奇妙な問題を抱えている知っています企業の代理人がこれを投稿しました：P