Bootstrap-Navbar zeigt Dropdown-Menü nicht bei Hover an

Question

Ich benutze Bootstrap Navbar und ich habe ein Problem, wo, wenn einer der Links ein Dropdown ist, das Menü nicht angezeigt wird.

Mit Blick auf die Dev-Tools, sehe ich, dass die Anzeige nicht von keiner zu Block ändert.

Kann jemand erklären, was das Problem hier sein kann? Ja, Bootstrap's CSS und JS sind in meinem Projekt enthalten.

HTML

<div class="navbar navbar-default" id="div-nav-bar"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapse" aria-expanded="false" (click)="showHide()"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <div class="navbar-brand"> 
       <img src="../assets/images/logo_small.png" alt="IRIS Logo" /> 
      </div> 
     </div> 
     <div class="collapse navbar-collapse" id="nav-collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="dropdown"> 
        <a class="dropdown-toggle" data-toggle="dropdown"> 
         <i class="glyphicon glyphicon-dashboard"></i> 
         <span>Dashboards </span> 
         <span class="caret"></span> 
        </a> 
        <ul class="dropdown-menu"> 
         <li> 
          <a href="dashboard"> 
           <i class="glyphicon glyphicon-facetime-video"></i> 
           <span>Fundus Exams</span> 
          </a> 
         </li> 
         <li> 
          <a href="glaucoma"> 
           <i class="glyphicon glyphicon-camera"></i> 
           <span>Glaucoma Exams</span> 
          </a> 
         </li> 
        </ul> 
       </li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
         <i class="glyphicon glyphicon-list-alt"></i> 
         <span>Reporting </span> 
         <span class="caret"></span> 
        </a> 
        <ul class="dropdown-menu"> 
         <li> 
          <a href="#"> 
           <i class="glyphicon glyphicon-folder-open"></i> 
           <span>Results</span> 
          </a> 
         </li> 
         <li class="active"> 
          <a href="#"> 
           <i class="glyphicon glyphicon-tasks"></i> 
           <span>Patient Result Report</span> 
          </a> 
         </li> 
        </ul> 
       </li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li> 
        <a href="grading" class="start-grading"> 
         <i class="glyphicon glyphicon-sunglasses"></i> 
         <span>Start Grading</span> 
        </a> 
       </li> 
       <li role="separator" class="divider">&nbsp;</li> 
       <li> 
        <a href="#" class="logout"> 
         <i class="glyphicon glyphicon-log-out"></i> 
         <span>Logout</span> 
        </a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 

Answer 1

beide schweben Hinzufügen und unter JQuery Code Leave wird das Dropdown-Menü auf schweben zeigen.

Siehe unten Snippet:

$(function() { 
 
    $(".navbar li.dropdown").hover(function(e) { 
 

 
    $(this).addClass("open"); 
 
    }); 
 

 
    $(".navbar li.dropdown").mouseleave(function() { 
 
    $(this).removeClass("open"); 
 
    }); 
 
});

/*.dropdown-menu li:hover .sub-menu { 
 
    visibility: visible; 
 
} 
 

 
.dropdown:hover .dropdown-menu { 
 
    display: block; 
 
} */ 
 

 
.dropdown:hover ul.dropdown-menu { 
 
    animation-name: fadeInLeft; 
 
    animation-fill-mode: both; 
 
    animation-timing-function: ease-out; 
 
    animation-duration: 0.2s; 
 
    animation-delay: 0s; 
 
} 
 

 
@keyframes fadeInLeft { 
 
from { 
 
visibility: hidden; 
 
opacity: 0; 
 
transform: scale(0) translateX(0); 
 
} 
 
to { 
 
visibility: visible; 
 
opacity: 1; 
 
transform: scale(1) translateX(-25px); 
 
} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="navbar navbar-default" id="div-nav-bar"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapse" aria-expanded="false" (click)="showHide()"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
     <div class="navbar-brand"> 
 
     <img src="../assets/images/logo_small.png" alt="IRIS Logo" /> 
 
     </div> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="nav-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="dropdown"> 
 
      <a class="dropdown-toggle" data-toggle="dropdown"> 
 
      <i class="glyphicon glyphicon-dashboard"></i> 
 
      <span>Dashboards </span> 
 
      <span class="caret"></span> 
 
      </a> 
 
      <ul class="dropdown-menu"> 
 
      <li> 
 
       <a href="dashboard"> 
 
       <i class="glyphicon glyphicon-facetime-video"></i> 
 
       <span>Fundus Exams</span> 
 
       </a> 
 
      </li> 
 
      <li> 
 
       <a href="glaucoma"> 
 
       <i class="glyphicon glyphicon-camera"></i> 
 
       <span>Glaucoma Exams</span> 
 
       </a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
 
      <i class="glyphicon glyphicon-list-alt"></i> 
 
      <span>Reporting </span> 
 
      <span class="caret"></span> 
 
      </a> 
 
      <ul class="dropdown-menu"> 
 
      <li> 
 
       <a href="#"> 
 
       <i class="glyphicon glyphicon-folder-open"></i> 
 
       <span>Results</span> 
 
       </a> 
 
      </li> 
 
      <li class="active"> 
 
       <a href="#"> 
 
       <i class="glyphicon glyphicon-tasks"></i> 
 
       <span>Patient Result Report</span> 
 
       </a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li> 
 
      <a href="grading" class="start-grading"> 
 
      <i class="glyphicon glyphicon-sunglasses"></i> 
 
      <span>Start Grading</span> 
 
      </a> 
 
     </li> 
 
     <li role="separator" class="divider">&nbsp;</li> 
 
     <li> 
 
      <a href="#" class="logout"> 
 
      <i class="glyphicon glyphicon-log-out"></i> 
 
      <span>Logout</span> 
 
      </a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>