Bootstrap - 下拉菜单在取消切换

时间:2017-06-22 11:09:30

标签: javascript jquery html css twitter-bootstrap

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

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

        }
    }
  }
}

1 个答案:

答案 0 :(得分:0)

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