Bootstrap Navbar Dropdown on Hover if not mobile

Question

Я пытаюсь сделать выпадающий список бутстрапов с навигационной панели, чтобы появиться на панели управления, но остановите эффект зависания при свернутом (мобильном). Это то, что я имею в виду, но когда я добавить, если заявление весь эффект не работает: HTML:

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand vaos" href="../index.html">VAOS</a> 
     </div> 
     <div id="navbar" class="collapse navbar-collapse navbar-right"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a class="trans" href="../index.html">Home</a></li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">What is VAOS <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
       <li><a href="options.html">VAOS & Other Options</a></li> 
       <li><a href="candidate.html">Am I a Candidate</a></li> 
       <li><a href="surgeon.html">Find a Surgeon</a></li> 
       <li><div class="ArrowUp1"></div></li> 
      </ul> 
     </li> 

      <li><a href="experience.html">Testimonials</a></li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Resources <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
       <li><a href="clinical-support.html">Clinical Support</a></li> 
       <li><a href="videos.html">Procedural Videos</a></li> 
       <li><a href="resources.html">Other Links & Resources</a></li> 
       <li><div class="ArrowUp2"></div></li> 
      </ul> 
      </li> 
     </ul> 
     </div><!--/.nav-collapse --> 
    </div> 

CSS:

@media (min-width: 768px) { 
    .navbar-nav .open ul { 
    display: none; 
    } 
    .navbar-default .navbar-nav > .open > a, 
    .navbar-default .navbar-nav > .open > a:hover, 
    .navbar-default .navbar-nav > .open > a:focus { 
    color: #555; 
    background: none; 
    } 
    .navbar-default .navbar-nav > li:hover { 
    background: #e7e7e7; 
    } 
    .navbar-inverse .navbar-nav > .open > a, 
    .navbar-inverse .navbar-nav > .open > a:hover, 
    .navbar-inverse .navbar-nav > .open > a:focus { 
    color: #969696; 
    background: none; 
    } 
    .navbar-nav > li:hover { 
    background: transparent !important; 
    } 
    .navbar-nav .hovernav:hover > .dropdown-menu { 
    display: block; 
    } 
} 

JavaScript:

'use strict'; 

$('ul.nav li.dropdown').hover(function() { 
    if(window.width > 767) { 
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500); 
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500); 
    } 
}); 

Answer 1

Вы можете сделать это без какого-либо языка сценариев. Просто попробуйте это.

@media screen and (min-width: 768px) { 
 
    .dropdown:hover>.dropdown-menu { 
 
    display: block; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 

 
     </button> <a class="navbar-brand vaos" href="../index.html">VAOS</a> 
 

 
    </div> 
 
    <div id="navbar" class="collapse navbar-collapse navbar-right"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a class="trans" href="../index.html">Home</a> 
 
     </li> 
 
     <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">What is VAOS <span class="caret"></span></a> 
 

 
      <ul class="dropdown-menu" role="menu"> 
 
      <li><a href="options.html">VAOS & Other Options</a> 
 
      </li> 
 
      <li><a href="candidate.html">Am I a Candidate</a> 
 
      </li> 
 
      <li><a href="surgeon.html">Find a Surgeon</a> 
 
      </li> 
 
      <li> 
 
       <div class="ArrowUp1"></div> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="experience.html">Testimonials</a> 
 
     </li> 
 
     <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Resources <span class="caret"></span></a> 
 

 
      <ul class="dropdown-menu" role="menu"> 
 
      <li><a href="clinical-support.html">Clinical Support</a> 
 
      </li> 
 
      <li><a href="videos.html">Procedural Videos</a> 
 
      </li> 
 
      <li><a href="resources.html">Other Links & Resources</a> 
 
      </li> 
 
      <li> 
 
       <div class="ArrowUp2"></div> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <!--/.nav-collapse --> 
 
    </div>

Она гладкая и удобная. +1 если это помогает.

Answer 2

Используйте CSS парение для элемента с классом выпадающего меню и установите класс выпадающего-меню для Diplay Заблокировать

@media screen and (min-width: 768px) { 
    li.dropdown:hover .dropdown-menu{ 
      display:block; 
     } 
    }