jquery悬停不显示子菜单

jquery hover not displaying submenu

本文关键字：菜单 显示 悬停 jquery      更新时间：2023-09-26

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

当我把鼠标悬停在菜单上时，什么也没发生。我知道它可能是一些小东西，但我似乎看不见。

我的菜单

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

将JQuery更改为：

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

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

在类之前添加.

$('.submenu').show();
相关文章：