用于下拉菜单的事件 - 悬停时关闭的子菜单

Question

所以我有一个带有许多子下拉菜单的导航。

目前，我正在使用悬停事件打开子菜单(悬停在父级 a 或箭头图标上(。

问题：每次我尝试将鼠标悬停在子菜单和子菜单的子菜单上时，它都会关闭。

在下面的小提琴中：尝试将鼠标悬停缓慢到子菜单(它们关闭(

很烦人。我是否使用了错误的事件或切换方法错误？

	/* NAVIGATION ON CLICK */
// Primary menu drop down (mobile)
$( ".dropdown-toggle" ).click(function() {
	$(this).parent().find(".sub-menu:first" ).toggleClass("toggle-on");
});
/* NAVIGATION ON HOVER */
// Sub menu drop down 
 $(".main-navigation ul li.menu-item-has-children").hover(function() {
 	$(this).find(".sub-menu:first").toggleClass("toggle-on");
 });
$(".primary-toggle").click(function() {
 	$(" .main-navigation ul:first").toggleClass("toggle-on");
});
// $(".main-navigation li.menu-item-has-children").mouseleave(function() {
//   $(".sub-menu").removeClass("toggle-on");
// });

	 /* 
		# HEADER
	 */
	 *, html {
	 	margin: 0;
	 	font-size: 22px;
	 }
	 .site-header {
	 	background-color: black;
	 	display: flex;
	 	justify-content: space-between;
	  	align-items: center;
	   	padding: 1rem;
	 }
	/* Burger Nav Styling */
	#sidebar-btn {
	 	vertical-align: middle;
	 	width: 40px;
		height: 25px;
		cursor: pointer;
		margin:10px;
	 	position: relative;
		top: 4px;
		
	}
	#sidebar-btn span {
		height: 2px;
		background: black;
		margin-bottom: 5px;
		display: block;
	}
	#sidebar-btn span:nth-child(2) {
		width: 75%;
	}
	#sidebar-btn span:nth-child(3) {
		width: 50%;
	}
	 /* Main Menu */
	 .main-navigation {
	 }
	/*.main-navigation .menu {
		display: none;
		padding: 1rem;
	 }	*/
	.menu-test-container {
		position: absolute;
		top: 90px;
		left: 0;
		width: 100%;
	}
	.main-navigation .menu.toggle-on {
		display: block;
	}
	 .main-navigation ul {
	 		display: none;
		/*padding: 0 1rem;*/
	 	position: relative;
	 	background-color: yellow;
	  }
		.main-navigation ul li {
			min-width: 140px;
			margin-right: 20px
		}
			 .main-navigation ul li a {
			 	color: #fff;
			 	padding: 10px;
			 	text-decoration: none;
			 }
	 
	/* SUB Menu styles */
	 .sub-menu.toggle-on {
	 	display: block;	
	 }
	 .main-navigation ul, .main-navigation ul ul, .main-navigation ul ul ul  {
	 	list-style: none;
	 	display: none;
	 	   margin-left:0;
	    padding-left:0;
	 }
	/* Positioning x y of EACH sub menus */
	  .main-navigation ul ul {
	  	
	  	background-color: pink;
	   }
	  .main-navigation ul  ul ul {
	  	left: 150px;
	  	top: 0;
	  	background-color: blue;
	   }
	   .main-navigation ul ul ul ul {
	   	background-color: green;
	   	top: 20px;
	   	left: 0;
	   }
	   .main-navigation ul ul ul ul ul {
	   	background-color: black;		
	   	top:0px;
	   	left: 200px;
	  }
	    .main-navigation ul ul ul ul ul ul {
	   	background-color: silver;		
	   	top:0px;
	   	left: 200px;
	  }
	@media  only screen and (min-width: 468px) {
	.site-header {
		flex-direction: column;
	}
		/* Main Navigation - Getting rid of navburger */
		#sidebar-btn {
			display: none;
		}
		.primary-toggle {
			display: none;
		}
		.main-navigation .menu.toggle-on {
			display: flex;
			background-color: blue;
		}
		.main-navigation  ul {
			display: flex;
			align-items: center;
			flex-direction: row;
			justify-content: space-between;
			background-color: blue;
		}
		.menu-test-container {
			display: block;
			position: relative;
			top: 0;
		}	/* end of */
		.main-navigation ul ul {
			position: absolute;
				  	/*left: 7.3rem;*/
		}
		.main-navigation ul ul ul {
			left: 7.3rem;
		}
	 
	}
	 /* TABLET MENU */  
	@media  only screen and (min-width: 768px) {
		.site-header {
		flex-direction: row;
	}
		body {
			background-color: yellow;
		}
		/* Main Navigation - Getting rid of navburger */
		#sidebar-btn {
			display: none;
		}
		.primary-toggle {
			display: none;
		}
		.main-navigation .menu.toggle-on {
			display: flex;
			background-color: blue;
		}
		.main-navigation  ul {
			display: flex;
			align-items: center;
			flex-direction: row;
			justify-content: space-between;
			background-color: blue;
		}
		.menu-test-container {
			display: block;
			position: relative;
			top: 0;
		}	/* end of */
	 	
	 	/* Sub menu navigation tablet */
	 	/* Positioning x y of EACH sub menus */
		  .main-navigation ul ul {
		  	position: absolute;
		  	background-color: pink;
	 	   }
		  		.main-navigation ul ul li {
		  			padding: 7px 1px;
		  		}
		  		.main-navigation ul ul li a {
		  			font-size: 90%;
		  				  	padding: 10px 10px;
		  		}
		  .main-navigation ul  ul ul {
		  	left: 7.3rem;
		  	top: 1px;
		  	background-color: blue;
		   }
		   .main-navigation ul ul ul ul {
		   	background-color: green;
		   	top: 20px;
		   	left: 0;
		   }
		   .main-navigation ul ul ul ul ul {
		   	background-color: black;		
		   	top:0px;
		   	left: 200px;
		  }
		    .main-navigation ul ul ul ul ul ul {
		   	background-color: silver;		
		   	top:0px;
		   	left: 200px;
		  }
	}
	 
	 

<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://use.fontawesome.com/c083bcc66d.js"></script>
</head>
<body>
<header id="masthead" class="site-header">
		<div class="site-branding">
			<div class="site-branding-text">
				<p class="site-title"><a href="http://localhost/wordpress/" rel="home">LOGO</a></p>
			</div>
		</div><!-- .site-branding -->
		<nav id="site-navigation" class="main-navigation">
			<button class="primary-toggle" aria-expanded="false">
				<div id="sidebar-btn">
					<span></span>
					<span></span>
					<span></span>				
				</div>   
			</button>
			<div class="menu-test-container">
				<ul id="primary-menu" class="menu" aria-expanded="true">
					<li id="menu-item-2035" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2035">
						<a href="http://localhost/wordpress/services/">Services</a>
						<span class="dropdown-toggle" aria-expanded="false">
							<span class="dropdown-symbol"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
						</span>
						<ul class="sub-menu">
							<li id="menu-item-2076" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2076">
								<a href="http://localhost/wordpress/asd/">Commercial</a>
								<span class="dropdown-toggle toggled-on" aria-expanded="true">
									<span class="dropdown-symbol"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
								</span>
								<ul class="sub-menu">
									<li id="menu-item-2082" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2082">
										<a href="http://localhost/wordpress/asd/">Rural</a>
										<span class="dropdown-toggle toggled-on" aria-expanded="true">
										  <span class="dropdown-symbol"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
										</span>
										<ul class="sub-menu">
											<li id="menu-item-2081" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2081">
												<a href="http://localhost/wordpress/services/">Electrical</a>
												<span class="dropdown-toggle" aria-expanded="false">
													<span class="dropdown-symbol"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
												</span>
												<ul class="sub-menu">
													<li id="menu-item-2079" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2079">
														<a href="http://localhost/wordpress/gallery/">Residential</a>
														<span class="dropdown-toggle" aria-expanded="false">
															<span class="dropdown-symbol"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
														</span>
														<ul class="sub-menu">
															<li id="menu-item-2083" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2083"><a href="http://localhost/wordpress/news-updates/">News Updates</a></li>
														</ul>
													</li>
												</ul>
											</li>
										</ul>
									</li>
								</ul>
							</li>
							<li><a href="#"> asdasd</a></li>
							<li><a href="#"> asdasd</a></li>
							<li><a href="#"> asdasd</a></li>
						</ul>
					</li>
					<li id="menu-item-2084" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2084">
						<a href="http://localhost/wordpress/asd/">Projects</a>
					</li>
					<li id="menu-item-2045" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2045">
						<a href="http://localhost/wordpress/blog/">Blog</a>
						<span class="dropdown-toggle" aria-expanded="false">
							<span class="dropdown-symbol"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
						</span>
						<ul class="sub-menu">
							<li id="menu-item-2078" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2078">
								<a href="http://localhost/wordpress/news-updates/">About</a>
								<span class="dropdown-toggle" aria-expanded="false">
									<span class="dropdown-symbol"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
								</span>
								<ul class="sub-menu">
									<li id="menu-item-2099" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2099">
										<a href="http://localhost/wordpress/news-updates/">News Updates</a>
									</li>
								</ul>
							</li>
						</ul>
					</li>
				</ul>
			</div>		
		</nav><!-- #site-navigation -->
		<link rel="stylesheet" type="text/css" href="style.css">
</header>
	<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>

Answer 1

我建议您在mouseleave时设置一个.setTimeout()，并在mouseenter时清除超时。因此，如果鼠标输入发生在比设置的延迟更短的时间内，则不会在 mouseleave 上执行的操作。

.hover()允许定义两个不同的处理程序，使用它们！

var menu_timeout;
$("#site-navigation li").hover(
  function(){  // Mouseenter
    var that = $(this);
    that.find(".sub-menu:first").addClass("toggle-on");
    clearTimeout(menu_timeout);
  },
  function(){  // Mouseleave
    var that = $(this);
    menu_timeout = setTimeout(function(){
      that.find(".sub-menu:first").removeClass("toggle-on");
    },250);
  }
);

/* 
# HEADER
*/
*, html {
  margin: 0;
  font-size: 22px;
}
.site-header {
  background-color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}
/* Burger Nav Styling */
#sidebar-btn {
  vertical-align: middle;
  width: 40px;
  height: 25px;
  cursor: pointer;
  margin:10px;
  position: relative;
  top: 4px;
}
#sidebar-btn span {
  height: 2px;
  background: black;
  margin-bottom: 5px;
  display: block;
}
#sidebar-btn span:nth-child(2) {
  width: 75%;
}
#sidebar-btn span:nth-child(3) {
  width: 50%;
}
/* Main Menu */
.main-navigation {
}
/*.main-navigation .menu {
display: none;
padding: 1rem;
}  */
.menu-test-container {
  position: absolute;
  top: 90px;
  left: 0;
  width: 100%;
}
.main-navigation .menu.toggle-on {
  display: block;
}
.main-navigation ul {
  display: none;
  /*padding: 0 1rem;*/
  position: relative;
  background-color: yellow;
}
.main-navigation ul li {
  min-width: 140px;
  margin-right: 20px
}
.main-navigation ul li a {
  color: #fff;
  padding: 10px;
  text-decoration: none;
}
/* SUB Menu styles */
.sub-menu.toggle-on {
  display: block;  
}
.main-navigation ul, .main-navigation ul ul, .main-navigation ul ul ul  {
  list-style: none;
  display: none;
  margin-left:0;
  padding-left:0;
}
/* Positioning x y of EACH sub menus */
.main-navigation ul ul {
  background-color: pink;
}
.main-navigation ul  ul ul {
  left: 150px;
  top: 0;
  background-color: blue;
}
.main-navigation ul ul ul ul {
  background-color: green;
  top: 20px;
  left: 0;
}
.main-navigation ul ul ul ul ul {
  background-color: black;    
  top:0px;
  left: 200px;
}
.main-navigation ul ul ul ul ul ul {
  background-color: silver;    
  top:0px;
  left: 200px;
}
@media  only screen and (min-width: 468px) {
  .site-header {
    flex-direction: column;
  }
  /* Main Navigation - Getting rid of navburger */
  #sidebar-btn {
    display: none;
  }
  .primary-toggle {
    display: none;
  }
  .main-navigation .menu.toggle-on {
    display: flex;
    background-color: blue;
  }
  .main-navigation  ul {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    background-color: blue;
  }
  .menu-test-container {
    display: block;
    position: relative;
    top: 0;
  }  /* end of */
  .main-navigation ul ul {
    position: absolute;
    /*left: 7.3rem;*/
  }
  .main-navigation ul ul ul {
    left: 7.3rem;
  }
}
/* TABLET MENU */  
@media  only screen and (min-width: 768px) {
  .site-header {
    flex-direction: row;
  }
  body {
    background-color: yellow;
  }
  /* Main Navigation - Getting rid of navburger */
  #sidebar-btn {
    display: none;
  }
  .primary-toggle {
    display: none;
  }
  .main-navigation .menu.toggle-on {
    display: flex;
    background-color: blue;
  }
  .main-navigation  ul {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    background-color: blue;
  }
  .menu-test-container {
    display: block;
    position: relative;
    top: 0;
  }  /* end of */
  /* Sub menu navigation tablet */
  /* Positioning x y of EACH sub menus */
  .main-navigation ul ul {
    position: absolute;
    background-color: pink;
  }
  .main-navigation ul ul li {
    padding: 7px 1px;
  }
  .main-navigation ul ul li a {
    font-size: 90%;
    padding: 10px 10px;
  }
  .main-navigation ul  ul ul {
    left: 7.3rem;
    top: 1px;
    background-color: blue;
  }
  .main-navigation ul ul ul ul {
    background-color: green;
    top: 20px;
    left: 0;
  }
  .main-navigation ul ul ul ul ul {
    background-color: black;    
    top:0px;
    left: 200px;
  }
  .main-navigation ul ul ul ul ul ul {
    background-color: silver;    
    top:0px;
    left: 200px;
  }
}

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://use.fontawesome.com/c083bcc66d.js"></script>
</head>
<body>
<header id="masthead" class="site-header">
    <div class="site-branding">
      <div class="site-branding-text">
        <p class="site-title"><a href="http://localhost/wordpress/" rel="home">LOGO</a></p>
      </div>
    </div><!-- .site-branding -->
    <nav id="site-navigation" class="main-navigation">
      <button class="primary-toggle" aria-expanded="false">
        <div id="sidebar-btn">
          <span></span>
          <span></span>
          <span></span>        
        </div>   
      </button>
      <div class="menu-test-container">
        <ul id="primary-menu" class="menu" aria-expanded="true">
          <li id="menu-item-2035" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2035">
            <a href="http://localhost/wordpress/services/">Services</a>
            <span class="dropdown-toggle" aria-expanded="false">
              <span class="dropdown-symbol"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
            </span>
            <ul class="sub-menu">
              <li id="menu-item-2076" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2076">
                <a href="http://localhost/wordpress/asd/">Commercial</a>
                <span class="dropdown-toggle toggled-on" aria-expanded="true">
                  <span class="dropdown-symbol"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
                </span>
                <ul class="sub-menu">
                  <li id="menu-item-2082" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2082">
                    <a href="http://localhost/wordpress/asd/">Rural</a>
                    <span class="dropdown-toggle toggled-on" aria-expanded="true">
                      <span class="dropdown-symbol"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
                    </span>
                    <ul class="sub-menu">
                      <li id="menu-item-2081" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2081">
                        <a href="http://localhost/wordpress/services/">Electrical</a>
                        <span class="dropdown-toggle" aria-expanded="false">
                          <span class="dropdown-symbol"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
                        </span>
                        <ul class="sub-menu">
                          <li id="menu-item-2079" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2079">
                            <a href="http://localhost/wordpress/gallery/">Residential</a>
                            <span class="dropdown-toggle" aria-expanded="false">
                              <span class="dropdown-symbol"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
                            </span>
                            <ul class="sub-menu">
                              <li id="menu-item-2083" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2083"><a href="http://localhost/wordpress/news-updates/">News Updates</a></li>
                            </ul>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li><a href="#"> asdasd</a></li>
              <li><a href="#"> asdasd</a></li>
              <li><a href="#"> asdasd</a></li>
            </ul>
          </li>
          <li id="menu-item-2084" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2084">
            <a href="http://localhost/wordpress/asd/">Projects</a>
          </li>
          <li id="menu-item-2045" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2045">
            <a href="http://localhost/wordpress/blog/">Blog</a>
            <span class="dropdown-toggle" aria-expanded="false">
              <span class="dropdown-symbol"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
            </span>
            <ul class="sub-menu">
              <li id="menu-item-2078" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2078">
                <a href="http://localhost/wordpress/news-updates/">About</a>
                <span class="dropdown-toggle" aria-expanded="false">
                  <span class="dropdown-symbol"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
                </span>
                <ul class="sub-menu">
                  <li id="menu-item-2099" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2099">
                    <a href="http://localhost/wordpress/news-updates/">News Updates</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </div>    
    </nav><!-- #site-navigation -->
    <link rel="stylesheet" type="text/css" href="style.css">
</header>
  <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>