Question

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

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

当子菜单关闭时，你必须实际将鼠标悬停在子菜单上以使其淡出。您只是在激活子菜单的主链接上，并且您将主链接保留在右侧，左侧或顶部，子菜单保持静态。

我试着用我对JS的基本知识编写我自己的小脚本（我在jsFiddle中注释了你的内容），如果我能让它只在从顶部离开链接时触发它，它会起作用，左右两侧。当您离开主链接并尝试访问子菜单时，子菜单会在您的鼠标到达之前消失。

我理解为什么会发生这种情况（我告诉它在离开类.dropdown时会消失，这是应用于主链接的类。）但我不知道如何修复它。我是JS的新手。

无论如何，对不起，如果我让你困惑，这里是JS小提琴，以便更好地掌握。

看看您是否可以看到我的代码被注释掉的问题。如果您将“产品”链接留在左侧，右侧和顶部，它将不会离开子菜单。

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

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

Answer 1

我认为你的jQuery代码比应该的更复杂一些。

此外，您的主导航设置还有一个奇怪的结构。而不是在主<ul>和子<li>上，您将每个链接都作为自己的<ul>。你在每个<ul>上都有“mainnav”的id，这有点奇怪，而且它不是有效的代码。（附注：你只能在页面上使用ID ONCE。如果你打算多次使用它，那就把它变成一个类。）

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

HTML：

<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);
   });
});

无论如何，我做了一个小提琴，效果很好。

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

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

有一个jQuery下拉菜单的问题

1 个答案: