Javascript 在jquery中使用if-else语句和.hover（）方法

我有一个下拉菜单，我已经做了功能很像一个模态

<div class="hidden-dropdown hide">
   <ul>
      <li><a>Blah</a></li>
      <li><a>Blah balh</a></li>
      <li><a>Blah</a></li>
   </ul>
</div>

代码可以通过删除hide类将下拉菜单发挥作用，但无法将其从视线中删除

我该怎么做才能使功能正常工作？我所需要的只是当鼠标悬停在导航栏KDROPDOWON上时显示下拉列表，当它不悬停在导航栏或隐藏的下拉列表div上时删除下拉列表

编辑：添加了navar的snippit

<ul class="action-bar__menu--main action-bar__menu list--inline action-bar--show" id="SiteNav" role="navigation">
   <li class="action-bar__menu-item hide-for-small-only {% if childlink.active %}action-bar--active{% endif %}">
      <a href="{% if template == 'index' or template == 'page.index' %}#{% else %}https://domeha.com{% endif %}" class="action-bar__link">Home</a>
   </li>
   <li class="action-bar__menu-item hide-for-small-only {% if childlink.active %}action-bar--active{% endif %}">
      <a href="{% if template == 'collection' %}#{% else %}/collections/all{% endif %}" id="kDropdown" class="action-bar__link">Products</a>
   </li>

谢谢大家!

div没有id，因此您应该使用class.hidden下拉列表：

$("#hidden-dropdown").addClass("hide");
___^

应该是：

$(".hidden-dropdown").addClass("hide");
___^

希望这有帮助

$document.readyfunction{ $li.悬停 作用{ $.hidden-dropdown.removeclasshhide； }，功能{ $.hidden-dropdown.addClasshide； } ; }; // 文件准备好了 废话 胡说八道 废话

---

悬停可以将处理程序引入参数，也可以将处理程序移出参数，因此最简单的解决方案是：

$(document).ready(function() {
  // question about kDropdown, where is this since it isn't in the code snippet?
  $('#kDropdown').hover(
  function() { $(".hidden-dropdown").removeClass("hide"); },
  function() { $(".hidden-dropdown").addClass("hide"); }
  );
})

---

使用。隐藏的下拉列表不是隐藏的下拉列表不幸的是，这并没有解决问题。好的，请添加所有相关代码，我在OP中找不到kDropdown。它已经添加了。+1两个答案都是正确的，但是D Lowther击败了你，找到了一个有效的解决方案。谢谢你的帮助！我添加了kdropdown模板引擎是液体

$(document).ready(function() {
  // question about kDropdown, where is this since it isn't in the code snippet?
  $('#kDropdown').hover(
  function() { $(".hidden-dropdown").removeClass("hide"); },
  function() { $(".hidden-dropdown").addClass("hide"); }
  );
})