javascript - jquery 和下拉菜单的简单问题（addclass，removeclass ...）

Question

我目前正在开发的一个网站有问题，如果你不明白我的解释，你可以直接去网站自己检查[LinkRemoved]它是关于下拉菜单的。

这是一个非常简单的 jquery 代码，当鼠标经过下拉菜单链接时，“open”类被添加到相关下拉菜单的 div 中，以便显示。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#header-primary ul li div a').hover(
      function() {
        $(this).parent("div").addClass("open"); //Add an active class to the anchor
      },
    )
  });
</script>

<script>
  $(document).ready(function() {
    $('#header-primary ul li div ul').mouseleave(
      function() {
        $(this).parent("div").removeClass("open"); //Add an active class to the anchor
      },
    )
  });
</script>

好吧，问题是，如果用户将鼠标移到下拉菜单之外，将其滑向菜单链接本身，.mouseleave 虽然它的功能是在再次传递链接时删除“open”类，但添加了“open”属性所以显示菜单。

我的想法是该链接有另一个 jquery 代码，但由于我在 jquery/vanilla 方面的经验很少，我不知道该怎么做，链接应该检查“open”类是否存在，如果不存在，添加它以便menu 已部署，如果存在“open”类（菜单已部署并且用户已将鼠标从菜单传递到链接），请将其删除以避免菜单保持打开状态。

老实说，如果有一种方法可以更轻松地做到这一点，您可以毫无问题地把它放在这里。

非常感谢您的宝贵时间。

标签： javascriptjquerydrop-down-menudropdown