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类，则效果很好。我尝试在不同的点添加另一个函数 -

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

没有运气。我意识到这个基本问题在这里被问了很多次。我已经使用了许多其他答案来实现这一目标，但最后一个问题是我无法弄清楚的。

如果鼠标进入li.products，如何在保留.active的同时让.active放弃鼠标上的#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');
});

Answer 2

将您的下拉列表嵌套在列表项中。

<ul>
  <li>
    Nav Item 1
    <ul class="dropdown-list">
      <li>Sub Item</li>
      <li>Sub Item</li>
    </ul>
  </li>
  <li>
    Nav Item 2
  </li>
  <li>
    Nav Item 2
  </li>
</ul>

这是您的示例代码

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
    <li class="products">
      <a href="products.php">Products</a>
      <div id="nav-products">
          <a href="#">Search by part number or product name:</a>
      </div>
    </li>
    <li>
      <a href="about.php">About</a>
    </li>
</ul>

＆＃13;

如何使用下拉列表保持菜单项上的CSS类

2 个答案: