在 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

div 没有id，所以你应该改用.hidden-dropdown 类：

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

应该是：

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

希望这会有所帮助。

$(document).ready(function() {
  $( "li" ).hover(
    function() {
       $(".hidden-dropdown").removeClass("hide");
    }, function() {
       $(".hidden-dropdown").addClass("hide");
    }
  );
}); // document is ready 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>

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

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

Answer 2

Hover 可以使用 handler in 和 handler out 参数，所以最简单的解决方案是：

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