jQuery選擇器與下拉菜單不能正常工作

Question

我做了一個下拉菜單，但它不能正常工作。見小提琴或代碼：https://jsfiddle.net/9u6fc7wp/

$(document).ready(function() { 
 
    $(function() { 
 
    $(".links>li>a:not(.sub-menu a)").mouseenter(function() { 
 
     $(".sub-menu-bg").addClass("menu-bg-up"); 
 

 
     setTimeout(function() { 
 
     $(".sub-menu").fadeIn(); 
 
     }, 700); 
 
    }); 
 
    $(".sub-menu-bg").mouseleave(function() { 
 
     $(".sub-menu").fadeOut(); 
 
     setTimeout(function() { 
 
     $(".sub-menu-bg").removeClass("menu-bg-up"); 
 
     }, 500); 
 
    }); 
 
    }()); 
 
});

#wrapper { 
 
    height: 300px; 
 
} 
 
footer { 
 
    background: white; 
 
    color: #8a8a8a; 
 
    font-family: TWcenMTregular; 
 
    font-size: 1em; 
 
    text-transform: uppercase; 
 
    padding: 1vh 0; 
 
    position: relative; 
 
    z-index: 9100; 
 
    width: 100%; 
 
} 
 
footer .links { 
 
    text-align: center; 
 
    list-style: none; 
 
} 
 
footer .links>li { 
 
    float: left; 
 
    width: 24%; 
 
    position: relative; 
 
} 
 
footer .links li::after { 
 
    content: ' | '; 
 
    float: right; 
 
} 
 
footer .links li:last-child::after { 
 
    content: ''; 
 
} 
 
footer .links li a { 
 
    color: #8a8a8a; 
 
} 
 
footer .links li:hover > a { 
 
    color: #9ebe2d; 
 
} 
 
footer .links li:hover .sub-menu li:first-child a { 
 
    color: #9ebe2d; 
 
} 
 
footer .sub-menu { 
 
    position: absolute; 
 
    bottom: 100%; 
 
    left: initial; 
 
    padding: 0px 0; 
 
    margin: 0!important; 
 
    font-family: TWcenMTregular; 
 
    font-size: 1em; 
 
    width: 100%; 
 
    height: 150px; 
 
    display: none; 
 
} 
 
footer .sub-menu li { 
 
    text-align: center; 
 
} 
 
footer .sub-menu li:first-child { 
 
    font-family: prismRegular; 
 
    padding: 0 0 10px 0; 
 
} 
 
footer .sub-menu li::after { 
 
    content: ''; 
 
    margin: 0; 
 
} 
 
footer .sub-menu li a { 
 
    color: #8a8a8a; 
 
} 
 
footer .sub-menu li a:hover { 
 
    color: #9ebe2d; 
 
} 
 
footer .sub-menu-bg { 
 
    background: rgba(255, 255, 255, 0.8); 
 
    position: absolute; 
 
    bottom: 100%; 
 
    left: initial; 
 
    z-index: -5; 
 
    width: 100%; 
 
    display: block; 
 
    transition: 0.7s; 
 
    -webkit-transition: 0.7s; 
 
    -moz-transition: 0.7s; 
 
    -o-transition: 0.7s; 
 
    -ms-transition: 0.7s; 
 
    height: 0; 
 
} 
 
.menu-bg-up { 
 
    height: 165px !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<footer> 
 
    <ul class="links"> 
 
    <li><a href="#">link1</a> 
 
     <ul class="sub-menu"> 
 
     <li><a href="#">link1</a> 
 
     </li> 
 
     <li><a href="#">link2</a> 
 
     </li> 
 
     <li><a href="#">link3</a> 
 
     </li> 
 
     <li><a href="#">link4</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">link2</a> 
 
     <ul class="sub-menu"> 
 
     <li><a href="#">link1</a> 
 
     </li> 
 
     <li><a href="#">link2</a> 
 
     </li> 
 
     <li><a href="#">link3</a> 
 
     </li> 
 
     <li><a href="#">link4</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">link3</a> 
 
    </li> 
 
    <li><a href="#">link4</a> 
 
    </li> 
 
    </ul> 
 
    <div class="sub-menu-bg"></div> 
 
</footer>

如果你慢慢地移動鼠標，它工作正常。我使用了超時功能，這會讓子菜單鏈接稍後顯示。如果將光標移動到其中一個鏈接並立即移動到鏈接將出現的空白位置。當光標與鏈接接觸時，上拉菜單消失。只有當光標離開頁腳時，它纔會消失。對我來說，似乎選擇器不能正常工作，而應該解決問題。我只想要mouseenter上的第一個孩子.links>li

如果這隻能用CSS完成，請告訴我怎麼做。我盡我所能。我希望我清楚地解釋這個問題，並隨時提出問題。

在此先感謝。

Answer 1

你可以在CSS中完成這一切。我在下面舉了一個例子。

https://jsfiddle.net/9u6fc7wp/1/

.links { 
 
    position: relative; 
 
    width: 24%; 
 
} 
 
.links > a::after { 
 
    content: "|"; 
 
    float: right; 
 
} 
 
.sub-menu { 
 
    visibility: hidden; 
 
    /* hides sub-menu */ 
 
    opacity: 0; 
 
    position: absolute; 
 
    top: -172px; 
 
    left: 0; 
 
    width: 100%; 
 
    transform: translateY(2em); 
 
    z-index: -1; 
 
    transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s; 
 
} 
 
.links:hover .sub-menu { 
 
    visibility: visible; 
 
    /* shows sub-menu */ 
 
    opacity: 1; 
 
    z-index: 1; 
 
    transform: translateY(0%); 
 
    transition-delay: 0s, 0s, 0.3s; 
 
    /* this removes the transition delay so the menu will be visible while the other styles transition */ 
 
} 
 
/* presentational */ 
 

 
body { 
 
    padding: 2%; 
 
    font: 18px/1.4 sans-serif; 
 
} 
 
footer { 
 
    position: relative; 
 
    top: 200px; 
 
} 
 
footer a { 
 
    color: #8a8a8a; 
 
    display: block; 
 
    padding: 0.5em 0px; 
 
    text-decoration: none; 
 
} 
 
footer a:hover { 
 
    color: #9ebe2d; 
 
} 
 
footer ul, 
 
footer ul li { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
footer > ul { 
 
    background: white; 
 
    text-align: center; 
 
} 
 
footer > ul > li { 
 
    display: inline-block; 
 
} 
 
footer > ul > li:first-child { 
 
    border-left: none; 
 
} 
 
.sub-menu { 
 
    background: white; 
 
}

<div id="wrapper"></div> 
 
<footer> 
 
    <ul> 
 
    <li class="links"><a href="#">link1</a> 
 
     <ul class="sub-menu"> 
 
     <li><a href="#">link1</a> 
 
     </li> 
 
     <li><a href="#">link2</a> 
 
     </li> 
 
     <li><a href="#">link3</a> 
 
     </li> 
 
     <li><a href="#">link4</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li class="links"><a href="#">link2</a> 
 
     <ul class="sub-menu"> 
 
     <li><a href="#">link1</a> 
 
     </li> 
 
     <li><a href="#">link2</a> 
 
     </li> 
 
     <li><a href="#">link3</a> 
 
     </li> 
 
     <li><a href="#">link4</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li class="links"><a href="#">link3</a> 
 
    </li> 
 
    <li class="links"><a href="#">link4</a> 
 
    </li> 
 
    </ul> 
 
    <div class="sub-menu-bg"></div> 
 
</footer>