javascript - 在 jquery 中使用 if else 语句和 .hover() 方法

Question

我有一个下拉菜单，其功能非常类似于模式。

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

和一些 jQuery，当我将鼠标悬停在 div 或导航栏链接上时，该链接具有可以选择的 id，会出现下拉菜单。

jQuery:

$(document).ready(function() {
   if ( $("#kDropdown") || $(".hidden-dropdown").hover == true ) {
      $("#kDropdown").hover(function() {
              $(".hidden-dropdown").removeClass("hide");
      });
   } else {
      $(".hidden-dropdown").addClass("hide");
  }// end if
}); // document is ready 

代码可以很好地通过删除“隐藏”类来使下拉菜单发挥作用，但不能将其从视线中删除。

我该怎么做才能使该功能正常工作？我所需要的只是将鼠标悬停在导航栏“#kDropdwon”上时显示下拉菜单，并在其未悬停在导航栏或“隐藏下拉”div 上时将其删除。

编辑:添加了 navar 的片段

<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>

谢谢!

Answer 1

Hover 可以接受处理程序输入和处理程序输出参数，因此最简单的解决方案是:

$(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"); }
  );
})