滑动菜单栏正在工作 - 但不是很好

Question

我在这个菜单上遇到了很多麻烦。我有它的工作，但我正在使用的方法是错误和低效。看看jsfiddle，首先悬停弹出菜单没有任何动画。然而，在第二次悬停和每次悬停之后，所需的动画工作。即使我让它在第一次悬停时工作，它仍然不会很好，因为当用户试图访问下拉列表中的任何项目时，鼠标输出事件被触发并且菜单开始向上滑动。这是我正在使用的Jquery：

$(function(){
$('.dropdown').hover(function(){
    $('.dropdown-menu').stop().slideDown(250);
});
$('.dropdown').mouseout(function(){
    $('.dropdown-menu').stop().slideUp(250);
});

我尝试将鼠标应用到下拉菜单中，使用：

$('.dropdown','.dropdown-menu').mouseout(function(){

这让情况变得更糟。我正在寻找一种更有效和用户友好的方式来使我的菜单栏具有所需的动画。

https://jsfiddle.net/ghcywu6L/

Answer 1

您可以使用此js代码

$(function(){
$(".dropdown").hover(            
        function() {
            $('.dropdown-menu', this).stop( true, true ).slideDown("250");
            $(this).toggleClass('open');
            $('b', this).toggleClass("caret caret-up");                
        },
        function() {
            $('.dropdown-menu', this).stop( true, true ).slideUp("250");
            $(this).toggleClass('open');
            $('b', this).toggleClass("caret caret-up");                
        });
});

Answer 2

我认为你不知道mouseover的东西。它确实存在。看看代码。现在应该没事了。

$(function() {
  $('.dropdown').mouseover(function() {
    $('.dropdown-menu').stop().slideDown(250);
  });
  $('.dropdown').mouseout(function() {
    $('.dropdown-menu').stop().slideUp(250);
  });
});

* {
  margin: 0;
  padding: 0;
}


/* Top nav syling */

.navbar-default {
  background-color: rgb(54, 135, 2);
  font-size: 120%;
}


/*Main display styling */

.jumbotron {
  height: 400px;
  background: url("../images/bg.jpg");
  background-size: cover;
  background-position: 50% 50%;
  width: 96%;
  border-bottom: 5px solid rgb(79, 201, 2);
  border-top: 5px solid rgb(79, 201, 2);
  border-radius: 5px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}


/*Navbar font coloring */

.nav.navbar-nav li a {
  color: white;
}


/* Centers content vertically */

.vert-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}


/*Styles partially transparent background within jumbotron class */

.transparent {
  background: rgba(190, 200, 216, .5);
  display: inline-block;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 5px;
  border-left: 4px solid rgb(79, 201, 2);
  border-right: 4px solid rgb(79, 201, 2);
  width: 60%;
}


/*Padding around desc within jumbotron */

#heading-desc {
  padding-top: 15px;
  padding-bottom: 15px;
}


/*Padding around title within jumbotron */

#heading-title {
  padding-top: 15px;
}


/* Bootstrap menu created using bootstrapdesigntools.com */

#custom-bootstrap-menu.navbar-default .navbar-brand {
  color: rgba(255, 255, 255, 1);
}

#custom-bootstrap-menu.navbar-default {
  font-size: 16px;
  background-color: rgba(54, 135, 2, 1);
  background: -webkit-linear-gradient(top, rgba(47, 196, 116, 1) 0%, rgba(54, 135, 2, 1) 100%);
  background: linear-gradient(to bottom, rgba(47, 196, 116, 1) 0%, rgba(54, 135, 2, 1) 100%);
  border-width: 1px;
  border-radius: 4px;
}

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
  color: rgba(255, 255, 255, 1);
  background-color: rgba(248, 248, 248, 0);
}

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
  color: rgba(255, 255, 255, 1);
  background-color: rgba(90, 224, 4, 1);
}

#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
  color: rgba(255, 255, 255, 1);
  background-color: rgba(68, 168, 5, 1);
}

#custom-bootstrap-menu.navbar-default .navbar-toggle {
  border-color: #44a805;
}


/*Styling of icons */

.size {
  font-size: 60px;
  padding-top: 15px;
}


/*Outline surrounding three columns including icons */

.outline {
  border-left: 2px solid rgb(79, 201, 2);
  border-right: 2px solid rgb(79, 201, 2);
}

.navbar-bottom {
  background-color: rgba(222, 223, 224, 1);
  background: -webkit-linear-gradient(top, rgba(249, 249, 249, 1) 0%, rgba(222, 223, 224, 1) 100%);
  background: linear-gradient(to bottom, rgba(249, 249, 249, 1) 0%, rgba(222, 223, 224, 1) 100%);
  margin: 0;
  padding-top: 2px;
  margin-top: 90px;
}

.btn-format {
  display: block;
  width: 40%;
  left: 50%;
  height: 6%;
  border-radius: 3px;
  margin-top: 3px;
}

.horizontal-center {
  margin: 0 auto;
  width: 100px;
}


}
.footer-heading {
  font-size: 150px;
  margin-top: 2px;
  margin-bottom: 7px;
}
footer-title-pad {
  padding-top: 2px;
}
#custom-bootstrap-menu.navbar-default .navbar-brand {
  color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default {
  font-size: 15px;
  background-color: rgba(47, 196, 116, 1);
  background: -webkit-linear-gradient(top, rgba(54, 135, 2, 1) 0%, rgba(47, 196, 116, 1) 100%);
  background: linear-gradient(to bottom, rgba(54, 135, 2, 1) 0%, rgba(47, 196, 116, 1) 100%);
  border-width: 1px;
  border-radius: 4px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
  color: rgba(255, 255, 255, 1);
  background-color: rgba(248, 248, 248, 0);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
  color: rgba(255, 255, 255, 1);
  background-color: rgba(68, 229, 74, 1);
}

/*Styles active tab of top menu bar */
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
  color: rgba(255, 255, 255, 1);
  background-color: rgba(57, 145, 3, 1));
  background: -webkit-linear-gradient(top, rgba(54, 135, 2, 1) 0%, rgba(57, 145, 3, 1) 100%);
  background: linear-gradient(to bottom, rgba(54, 135, 2, 1) 0%, rgba(57, 145, 3, 1) 100%);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
  border-color: #42a503;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
  background-color: #42a503;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
  background-color: #42a503;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
  background-color: #2fc474;
}
.navbar-bottom button {
  margin: auto;
}
.footer-bottom {
  margin-bottom: 7px;
}
.footer-top {
  margin-top: 2px;
}

/*Upper outline on bottom navigation bar*/
.outline-above {
  border-top: 1px solid rgb(79, 201, 2);
}

/*Spacing between buttons in footer, error- needs more efficient  class */
#button-margin-top1 {
  margin-top: 8px;
}
#button-margin-top2 {
  margin-top: 8px;
}
#button-margin-top3 {
  margin-top: 8px;
}

/*dropdown menu background color */
.dropdown-menu {
  background-color: rgba(47, 196, 116, 1);
  background: -webkit-linear-gradient(top, rgba(67, 171, 3, .93) 0%, rgba(47, 196, 116, .93) 100%);
  background: linear-gradient(to bottom, rgba(67, 171, 3, .93) 0%, rgba(47, 196, 116, .93) 100%);
}

/*Dropdown menu on hover instead of click unless screen has been resized */
@media (min-width: 979px) {
  ul.nav li.dropdown:hover>ul.dropdown-menu {
    display: block;
  }
}
#custom-bootstrap-menu.navbar-default .dropdown-menu>li>a:hover,
#custom-bootstrap-menu.navbar-default .dropdown-menu>li>a:focus {
  background-color: rgba(68, 229, 74, 1);
}

/*Changes dropdown menu icon on screen resize */
.navbar-toggle,
.icon-bar {
  background-color: rgba(44, 226, 50, 1);
}
.dropdown>a {
  display: block;
}
.div-outliner {
  border: 1px solid black;
}
.col-lg-8 {
  background: url("../images/bg.jpg");
  height: 300px;
  background-position: 0 50%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="css/custom.css" rel="stylesheet">
  <script type="text/javascript" src="scripts/dropdown.js"></script>
</head>

<body>
  <div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
    <div class="container-fluid">
      <div class="navbar-header"><a class="navbar-brand" href="#">Brand Logo</a>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
            </button>
      </div>
      <div class="collapse navbar-collapse navbar-menubuilder">
        <ul class="nav navbar-nav navbar-left">
          <li class="active"><a href="#">Home</a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle slideDown" data-toggle="dropdown">Products<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Option 1</a></li>
              <li class="divider"></li>
              <li><a href="#">Option 2</a></li>
              <li class="divider"></li>
              <li><a href="#">Option 3</a></li>
              <li class="divider"></li>
              <li><a href="#">Option 4</a></li>
            </ul>
          </li>
          <li><a href="/about-us">About Us</a>
          </li>
          <li><a href="/contact">Contact Us</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
 

</body>

</html>