Le menu déroulant ne restera pas ouvert bootstrap 4

Question

Je rencontre actuellement des problèmes avec mes menus déroulants. Je voudrais qu'ils s'ouvrent/se ferment seulement quand le menu déroulant est cliqué, pas les éléments de liste ou n'importe où ailleurs dans le corps.

Voici mon code que j'ai les questions avec:

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

J'ai essayé d'ajouter en ligne javascript pour mais ce « stopPropagation » a donné lieu dans le menu déroulant ne pas ouvrir du tout.

Voici une jsFiddle approximative de ce qui se passe avec teh menus déroulants dans Teh barre de navigation de gauche: https://jsfiddle.net/jr_iridium/aqLa77ax/

Je suis relativement nouveau pour amorcer alors s'il vous plaît laissez-moi savoir si je l'ai fait des erreurs.

Merci d'avance.

Answer 1

Voici ma réponse, après de longs tests depuis que je l'ai utilisé avec Boostrap 3. En supprimant le data-toggle="dropdown" est le seul moyen de supprimer la fermeture automatique lors de clics extérieurs. Lié à here mais votre question est Bootstrap 4

Essayez ceci:

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

Si le violon ne me laisse tout simplement pas savoir, je vais avoir problème bizarre violon depuis que je suis sous proxy d'entreprise affichant ceci: P