javascript - 带有下拉菜单的导航非常有问题

Question

我正在一个网站上工作以了解有关 javascript 的更多信息，但我不知道如何解决这个问题。如果你看看 fiddlle 并尝试导航，你就会知道我在说什么(如果不是，请尝试将鼠标悬停在 Multiplier 上并尝试单击 Quadruple)。 .slideUp() 似乎也有问题，我不知道为什么。我希望它看起来像是从导航中滑下并滑回导航中。

那么您将如何解决这 2 个问题？ https://jsfiddle.net/26L2h6zg/

// Drop down menu
$(".shopDrop").hide();

$(".shop ul li").hover(function(){
    $(this).find(".shopDrop").slideDown();
}, function(){
    $(this).find(".shopDrop").slideUp();
});

// Drop down menu info
$(".shopDrop a").hover(function(){
  $(this).next(".shopHoverInfo").fadeIn("slow");
}, function(){
  $(this).next(".shopHoverInfo").fadeOut("slow");
});

Answer 1

// Drop down menu
$(".shopDrop").hide();

$(".shop ul li").hover(function(){
 	$(this).find(".shopDrop").stop(true).slideDown();
}, function(){
 	$(this).find(".shopDrop").stop(true).slideUp();
});

// Drop down menu info
$(".shopDrop a").hover(function(){
  //$(this).stop(true, true);
  $(this).next().stop(true).fadeIn("slow");
}, function(){
  //$(this).stop(true);
  $(this).next().stop(true).fadeOut("slow");
});

nav.shop {
	width: 100%;
	height: 100px;
	background: #182024;
	margin: 0;
}

nav.shop ul {
	width: 960px;
	list-style-type: none;
	margin: 0 auto;
	padding: 0;
}

nav.shop ul li {
	display: inline-block;
	vertical-align: top;
	padding-left: 25px;
}

nav.shop ul li h1 {
	font-size: 35px;
	margin-right: 20px;

}

nav.shop ul li h2 {
	color: #fff;
	text-decoration: none;
	font-size: 35px;
	margin-left: 10px;
}

nav.shop ul li a {
	color: #fff;
	text-decoration: none;
	font-size: 35px;
	padding-bottom: 10px;
	padding-top: 10px;
	display: block;
}

.shopDrop {
	position: absolute;
	background: #182024;
	padding: 30px 10px 0 10px;
	margin-top: -30px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}

nav.shop ul li div a {font-size: 20px;}
nav.shop ul li div span {font-size: 15px;}

#shopMultiplier{border-bottom: 5px solid #CA2525;}
#shopAutoclicker{border-bottom: 5px solid #2596CA;}
#shopFarms{border-bottom: 5px solid #CAB125;}
#shopSkills{border-bottom: 5px solid #35CA25;}

.shopHoverInfo {
	display: none;
	width: 150px;
	background: #1C262A;
	text-align: center;
	padding: 0;
	color: #fff;
}

.shopHoverInfo h3 {
	font-size: 17px;
	background: #CA2525;
	margin: 0;
	padding: 5px;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
}

.shopHoverInfo h4 {
	font-size: 17px;
	margin: 0;
	background: #EED634;
}

.shopHoverInfo p {
	font-size: 15px;
}

<nav class="shop">
	<ul>
		<li><h1>SHOP</h1></li>
		<li>
			<h2 href="#" id="shopMultiplier"><a href="#">Multiplier</a></h2>
			<div class="shopDrop">
				<a href="#" id="doublePoints">Double knowledge <span>&#x2606;</span></a>
				<div class="shopHoverInfo">
					<h3>Double Knowledge</h3>
					<h4>Price: <span id="shopDoublePrice"></span> knowledge</h4>
					<p>When you click you get 2x knowledge</p>
				</div>
				<a href="#" id="triplePoints">Triple knowledge <span>&#x2606;</span></a>
				<div class="shopHoverInfo">
					<h3>Triple Knowledge</h3>
					<h4>Price: <span id="shopTriplePrice"></span> knowledge</h4>
					<p>When you click you get 3x knowledge</p>
				</div>
				<a href="#" id="quadruplePoints">Quadruple knowledge <span>&#x2606;</span></a>
				<div class="shopHoverInfo">
					<h3>Quadruple Knowledge</h3>
					<h4>Price: <span id="shopQuadruplePrice"></span> knowledge</h4>
					<p>When you click you get 4x knowledge</p>
				</div>
			</div>
		</li>

		<li><h2 href="#" id="shopAutoclicker"><a href="#">Auto-clicker</a></h2></li>
		<li>
			<h2 href="#" id="shopFarms"><a href="#">Farms</a></h2>
			<div class="shopDrop">
				<a href="#" id="simpleminds">Simple mind's <span></span></a>
				<div class="shopHoverInfo">
					<h3>Simple Mind</h3>
					<p>Simple mind farms 1 knowledge each second.</p>
				</div>
				<a href="#" id="intelligentminds">intelligent mind's <span></span></a>
				<div class="shopHoverInfo">
					<h3>Intelligent Mind</h3>
					<p>Intelligent mind farms 2 knowledge each second.</p>
				</div>
			</div>
		</li>
		<li>
			<h2 href="#" id="shopSkills"><a href="#">Skills</a></h2>
			<!-- <div class="shopDrop">
				<a href="#" id="simpleminds">Simple mind's <span></span></a>
			</div> -->
		</li>
	</ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

根据您的需要制作 HTML 会更容易。希望这会有所帮助。