Bootstrap - 下拉式菜单消失得太快，无法移动

Question

我有一个引导式导航栏，我已经改变它，所以下拉式菜单显示每当一个盘旋在菜单项（而不是每当一次点击）。这有效，但有些东西没有关闭：下拉菜单很快并且不规则地消失，只是悬停然后点击某些东西并不容易。我不确定如何描述这一点，但我认为你会明白我的意思，一切似乎有点太“快”。

这里是一个的jsfiddle： https://jsfiddle.net/r3sjgq2c/

编辑：我在大视口中谈论的菜单，不是小视！

下面是代码：

<div class="header container-fluid"> 

    <div class="row"> 
    <div class="brand col-sm-10 offset-sm-1 hidden-xs-down"> 
     <svg class="brand_logo"><use xlink:href="#brand_logo" /></svg> 
    </div> 

<nav class="navbar navbar-toggleable-md navbar-light bg-faded col-sm-10 offset-sm-1"> 

    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="collapse navbar-collapse" id="navbarNavDropdown"> 
    <ul class="navbar-nav mx-auto"> 

     <li class="nav-item active"> 
     <a class="nav-link" href="index.php">Welcome<span class="sr-only">(current)</span></a> 
     </li> 

     <li class="nav-item dropdown"> 
     <a class="nav-link dropdown-toggle" id="dropdown_angebot" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Pricing 
     </a> 

     <div class="dropdown-menu" aria-labelledby="dropdown_angebot"> 
      <a class="dropdown-item" href="softwareentwicklung.php">Action</a> 
      <a class="dropdown-item" href="qualitaetssicherung.php">Another action</a> 
     </div> 
     </li> 

     <li class="nav-item dropdown"> 
     <a class="nav-link dropdown-toggle" href="http://example.com"> 
      Our Company 
     </a> 

     <div class="dropdown-menu" > 
      <a class="dropdown-item" href="geschichte.php">History</a> 
      <a class="dropdown-item" href="karriere.php">Career</a> 
      <a class="dropdown-item" href="klienten.php">Clients</a> 
     </div> 
     </li> 

     <li class="nav-item active"> 
     <a class="nav-link" href="anfahrt.php">Get here<span class="sr-only">(current)</span></a> 
     </li> 

     <li class="nav-item active"> 
     <a class="nav-link" href="kontakt.php">Contact<span class="sr-only">(current)</span></a> 
     </li> 
    </ul> 
    </div> 
</nav> 

    </div> 
</div> 

CSS：

.navbar-toggler{ 
    z-index: 999999 !important; 
} 

.header { 
    background-color: blue; 

    .navbar-toggler { 
     margin-top: 20px !important; 
    } 

    .navbar { 
    height: 50px !important; 
    padding: 0 !important; 
    background-color: yellow !important; 

    .navbar-nav { 
     display: table !important; 
     width: 100% !important; 
     list-style: none !important; 

     .nav-link { 
      padding: 0 !important; 
     } 

     li { 
     display: table-cell !important; 
     text-align: center !important; 

      a { 
      display: block !important; 
      text-align: center !important; 
      } 

      &:first-child a { 
       text-align: left !important; 
      } 
      &:last-child a { 
       text-align: right !important; 
      } 



      &:hover .dropdown-menu, .dropdown-item:hover .dropdown-menu { 
       display: block !important; 
      } 
      .dropdown-menu { 
      // margin-top: 10px; 
      left: 50% !important; 
      transform: translateX(-50%) !important; 
      } 

     } 
    } 
    } 
} 

Answer 1

在你的JavaScript文件中添加这一点。还添加 包括这个jQuery顶掉你所有的JS文件

https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js 



$(function(){ 
    $(".dropdown").hover(   
      function() { 
       $('.dropdown-menu', this).stop(true, true).fadeIn("fast"); 
       $(this).toggleClass('open'); 
       $('b', this).toggleClass("caret caret-up");     
      }, 
      function() { 
       $('.dropdown-menu', this).stop(true, true).fadeOut("fast"); 
       $(this).toggleClass('open'); 
       $('b', this).toggleClass("caret caret-up");     
      }); 
    });