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");                
            });
    });