jQuery下拉菜单有问题

Question

我已经研究了大约3个小时了，没有肉汁，所以我最终放弃了，决定在这里问。我有一个jsFiddle，我希望有人能看看并帮助我。

基本上，我正在尝试创建一个简单的下拉菜单，除了一个小问题之外，它工作得很好。

当子菜单出现时，您必须将鼠标悬停在该子菜单上才能使其淡出。您只是在激活子菜单的主链接上，而您将主链接留在右侧、左侧或顶部，子菜单将保持不变。

我试着用我对JS的基本知识编写自己的小脚本(我在jsFiddle上注释掉了让你看到)，如果我能让它只在离开顶部、左侧和右侧的链接时触发，它就会起作用。当您离开主链接并尝试访问子菜单时，子菜单甚至在您的鼠标到达它之前就消失了。

我理解为什么会发生这种情况(我告诉它在离开.dropdown类时消失，该类是应用于main link的类)。但我不知道该怎么解决它。我是JS的新手。

无论如何，如果我把你弄糊涂了，很抱歉，这里是JS小提琴，以便更好地掌握。

看看你能不能看到我的代码被注释掉的问题。如果您将"Products“链接保留在左侧、右侧和顶部，它将不会离开子菜单。

然后你可以取消对我的代码的注释，看看为什么它不工作。

http://jsfiddle.net/4wzmf/8/

Answer 1

我认为您的jQuery代码比预期的要复杂一些。

此外，你有一个奇怪的结构与你的主导航设置。而不是在主<ul>和子<li>上，每个链接都是它自己的<ul>。你在每个<ul>上都有"mainnav“的id，这有点奇怪，而且它不是有效的代码。(附注:一个ID在一个页面上只能使用一次。如果您要多次使用它，请将其设置为一个类。)

我还按照我喜欢的方式清理了一些CSS。这并不意味着它比你拥有的更好。

超文本标记：

<ul id="mainnav">
    <li><a href="#">news</a></li>
    <li><a href="#">contact</a></li>
    <li><a href="#">rentals</a></li>
    <li><a href="#">services</a></li>
    <li class="dropdown"><a href="#" >products</a>
        <ul class="sublinks">
            <li><a href="#">link 1</a></li>
            <li><a href="#">link 2</a></li>
            <li><a href="#">link 3</a></li>
            <li><a href="#">link 4</a></li>
        </ul>
    </li>
    <li><a href="#">about</a></li>
    <li class="home"><a href="#">home</a></li>    
</ul>

和jQuery

$(function() {
   $('.dropdown').mouseenter(function() {
       $('.sublinks').slideDown(300);
   });

   $('.dropdown').mouseleave(function() {
       $('.sublinks').slideUp(300);
   });
});

无论如何，我做了一个js小提琴，它工作得很好。

http://jsfiddle.net/QhkUn/23/

基本上，我所做的就是清理你的导航结构。如果您在<li class="dropdown">中创建了一个“子链接”的嵌套<ul>，那么您可以简单地说，在"dropdown“主链接<li>的鼠标输入/鼠标左键上执行所有操作。这样，当你将鼠标移出“子链接”时，它就会向上滑动，因为它是"dropdown“的子节点--这有意义吗？