javascript - 如何使用下拉菜单将 CSS 类保留在菜单项上

Question

我有一个隐藏的下拉菜单，显示 <li>悬停。这是 HTML:

<ul>
    <li class="products">
        <a href="products.php">Products</a>
    </li>
    <li>
         <a href="about.php">About</a>
    </li>
</ul>
<div id="nav-products">
    <p>Search by part number or product name:</p>
</div>

悬停时，类.active被添加到 <li> .这是 jQuery:

$(".products").mouseover(function () {
    $("#nav-products").show();
    $(".products").addClass('active');
});
$(".products, #nav-products").mouseleave(function () {
    $("#nav-products").hide();    
});
$("#nav-products").mouseover(function () {
    $(this).stop(true, true).show();
});
$("#nav-products").mouseleave(function () {
    $(".products").removeClass('active');
});

效果很好除了如果我退出下拉菜单 <div>通过li.products , li.products保留 .active类(class)。我尝试在不同的点添加另一个功能-

$(".products").mouseleave(function () {
    $(this).removeClass('active');
});

运气不好。我意识到这个基本问题在这里被问了很多次。到目前为止，我已经使用了许多其他答案，但最后一个问题是我无法弄清楚的。

我怎样才能得到 li.products删除 .active在保持 .active 的同时在 mouseleave 上课如果鼠标进入 #nav-products ？

Answer 1

HTML:

<ul>
    <li class="products">
        <a href="products.php">Products</a>
        <div id="nav-products" style='display:none'>
           <p>Search by part number or product name:</p>
        </div>
    </li>
    <li>
         <a href="about.php">About</a>
    </li>
</ul>

JS:

$(".products").hover(function () {
  $("#nav-products").toggle();
  $(".products").toggleClass('active');
});