Question

我有一个bootstrap导航栏，我已经更改了它，以便只要一个悬停菜单项（而不是每次点击），下拉菜单就会显示。这有效，但有一些东西：下拉菜单很快就会不规则地消失，只是悬停然后点击某些东西就不那么容易了。我不知道如何描述这一点，但我认为你会明白我的意思，一切看起来都有点过快＆＃34;快速＆＃34;。

这是一个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");                
            });
    });

Bootstrap - 下拉菜单在取消切换

1 个答案: