jquery - 使用 JQuery 和 CSS 创建一个简单的下拉菜单

Question

我在使用 jquery/css 创建下拉菜单时遇到问题。

现在，每个类别的每个下拉菜单都是一个 div，在悬停某个类别之前，它会隐藏显示。我正在尝试让 jquery 在悬停和鼠标离开时显示/隐藏正确的 div。

我使用的逻辑是:如果悬停类别链接或下拉菜单，则显示下拉菜单，否则隐藏下拉菜单。

更具体地说，我遇到的问题是，只要用户将鼠标悬停在类别链接上，下拉菜单就会显示...只要下拉 div 没有悬停，它就会关闭。如果下拉菜单未悬停或类别链接未悬停，我需要关闭它...

现在，即使我将鼠标悬停在相邻类别上试图查看相邻下拉菜单的类别，第一个下拉菜单仍保持打开状态，除非我首先将鼠标悬停在该下拉 div 上。

此外，当用户将鼠标悬停在某个类别上时，每个 div 的下拉菜单首先下降，当用户将鼠标悬停在下拉 div 上时再次下降，这使得它看起来有问题。

我知道这可以用更少的代码来实现:) 请记住，我是 JQuery 的新手。另外请记住，我想保留下拉菜单的 DIV 设置，并且我没有使用列表。

这是我的 JQuery 代码:

<script type="text/javascript">
    $(document).ready(function(){
        $("#productsLink").hover(function(){
            $("#productsMenu").slideDown();
        });
        $("#productsLink, #productsMenu").hover(function(){
            $("#productsLink").css("color","red");
        });
        $("#productsMenu").mouseleave(function(){
            $("#productsLink").css('color', 'white');
            $("#productsMenu").slideUp();
        });
        $("#aboutLink").hover(function(){
            $("#aboutMenu").slideDown();
            $(this).css("color","red");
        });
        $("#aboutMenu").hover(function(){
            $("#aboutMenu").hide();
        });
        $("#aboutMenu").hover(function(){
            $("#aboutLink").css('color', 'red');
        });
        $("#aboutMenu").mouseleave(function(){
            $("#aboutLink").css('color', 'white');
        });
    });
    </script>

Answer 1

这个问题与您的 JS 无关，而与标记有关。解决此问题的最简单方法是将菜单项和每个元素的下拉菜单都包装在一个 div 中，并在该特定 div 上触发悬停事件。

<div id="nav-item1">
        <a id="nav-link1">nav item</a>
        <div id="dropdown1">Some Stuff</div>
</div>

这样，只要将 nav-item1 div 中的某些内容悬停在(链接或菜单)上，它就会保持可见。

有很多方法可以使用 jQuery 来完成，但这是一个简单的修复，将使用更少的代码。请记住，这些事件中的每一个都是独立的。这就是为什么你会得到双重动画的奇怪行为。将鼠标悬停在链接上会触发您的事件之一，将鼠标悬停在菜单上会触发第二个事件。您可以使用一些 if 语句来阻止它，但不要让自己变得比需要的更难。