javascript - jquery悬停不显示子菜单

Question

我正在创建一个包含子菜单的菜单，当我将鼠标悬停在一个包含子菜单的菜单上时，它需要显示子菜单。

当我将鼠标悬停在菜单上时，没有任何反应。我知道它可能很小，但我似乎看不到它。

我的菜单

<div class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Products</a>
        <ul class="submenu">
            <li>
                <a href="#">Product 1</a>
            </li>
        </ul>
    </li>
  </ul>
</div>

我的CSS

.submenu {
  display: none;
}

我的查询

$('.menu li').hover(
  function () {
    $('submenu').show();
  }, 
  function () {
   $('submenu').hide();
  }
);

Answer 1

将您的 JQuery 更改为:

$('.menu li').hover(
  function () {
    $(this).find('.submenu').show();
  }, 
  function () {
   $(this).find('.submenu').hide();
  }
);

添加 $(this).find() 意味着它只会显示相关的子菜单，这意味着您可以在导航中有多个子菜单