ドロップダウンメニューのドロップダウンメニューが機能しない

Question

私はJavaScriptを練習するサイトで作業していますが、私はこれを理解できません。 何らかの理由で、2番目のドロップダウンメニューが表示されません。私はconsole.log（ "ホバー"）を追加し、ホバーを検出してメニューを表示しないという意味のメッセージを表示します。 私がホバーしたメニューだけを表示したい。 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(); 
}); 

あなたはjQueryの#doublePointsの子を探して作っている.find()を、使用しています。しかし、それは子供ではなく、次の兄弟です。したがって、.next()を使用してください。

また、.css("display", "block")は不必要ではありません.fadeIn();。

Answer 2

.shopHoverInfoは#doublePointsの子ではありません。 $.find()の代わりに$.next()を使用できますが、#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"> 
 
\t \t \t \t \t <h3>Double Knowledge</h3> 
 
\t \t \t \t \t <p>When you click you get 2x knowledge</p> 
 
\t \t \t \t </div></a> 
 

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

 
     <a href="#" id="quadruplePoints">Quadruple knowledge <span>&#x2606;</span><div class="shopHoverInfo"> 
 
\t \t \t \t \t <h3>Quadruple Knowledge</h3> 
 
\t \t \t \t \t <p>When you click you get 4x knowledge</p> 
 
\t \t \t \t </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>