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语句来阻止它，但是不要让它比你需要的更难。

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

1 个答案: