下拉菜单内的下拉菜单不起作用

Question

我正在一个网站上练习 javascript，但我无法弄清楚这一点。 由于某种原因，第二个下拉菜单不会出现。我添加了 console.log("hover") 并显示了消息，这意味着它检测到悬停但不显示菜单。 我只想显示我悬停的菜单。 https://jsfiddle.net/py8mkvxq/

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

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

// Drop down menu info
$("#doublePoints").hover(function(){
    console.log("in");
    $(this).find(".shopHoverInfo").css("display", "block");
    $(this).find(".shopHoverInfo").fadeIn();
}, function(){
    console.log("out");
    $(this).find(".shopHoverInfo").hide().fadeOut();
});

Answer 1

看看这个JSfiddle！这为所有子菜单链接添加了功能。

$(".shopDrop a").hover(function(){
//find the next sibling of the `.shopDrop a` that was hovered on and fade it in
  $(this).next(".shopHoverInfo").fadeIn();
}, function(){
  //find the next sibling of the `.shopDrop a` that was no longer hovered on and fade it out
  $(this).next(".shopHoverInfo").fadeOut();
});

您正在使用.find()，这使jQuery 寻找#doublePoints 的子级。然而，这不是一个孩子，而是下一个兄弟姐妹。因此，请使用.next()。

另外，.css("display", "block") 不是不必要的.fadeIn();。

Answer 2

.shopHoverInfo 不是#doublePoints 的子级。您可以使用$.next() 而不是$.find()，但是当您将鼠标悬停在子菜单上时菜单将关闭，因为您不再将鼠标悬停在#doublePoints 上。

我只是将.shopHoverInfo 元素移动到#doublePoints 链接中。

https://jsfiddle.net/py8mkvxq/3/

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

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

// Drop down menu info
$("#doublePoints").hover(function() {
  console.log("in");
  //$(this).next(".shopHoverInfo").css("display", "block");
  $(this).find(".shopHoverInfo").fadeIn();
}, function() {
  console.log("out");
  //$(this).next(".shopHoverInfo").css("display", "none");
  $(this).find(".shopHoverInfo").fadeOut();
});

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: 10px 5px 5px 5px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.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><div class="shopHoverInfo">
					<h3>Double Knowledge</h3>
					<p>When you click you get 2x knowledge</p>
				</div></a>

        <a href="#" id="triplePoints">Triple knowledge <span>&#x2606;</span><div class="shopHoverInfo">
					<h3>Triple Knowledge</h3>
					<p>When you click you get 3x knowledge</p>
				</div></a>

        <a href="#" id="quadruplePoints">Quadruple knowledge <span>&#x2606;</span><div class="shopHoverInfo">
					<h3>Quadruple Knowledge</h3>
					<p>When you click you get 4x knowledge</p>
				</div></a>

      </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>
        <a href="#" id="intelligentminds">intelligent mind's <span></span></a>
      </div>
    </li>
    <li>
      <h2 href="#" id="shopSkills"><a href="#">Skills</a></h2>
    </li>
  </ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>