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>