javascript - 在列表项上显示隐藏的 div

Question

html:

我有一个 ul 列表，每个 li 的结构如下：

   <li class="A">list-item
     <div>1</div>
     <div class="B">2
        <div class="C">3</div>
     </div>

   </li>

其中 div C 具有 css 属性 display:none; 我写了这个js：

   $(".A").hover(function () {
   $(".C").toggle();
   });

在 li 悬停时显示隐藏的 div，但我希望 js 仅在活动 li 项目上工作。因此，当我将鼠标悬停在 li 项目上时，它只显示该列表项目隐藏的 div。

有什么建议么？我是 js 新手，所以任何帮助将不胜感激，谢谢！

Answer 1

C尝试这样的事情，它会在里面找到类this（这将是悬停的元素）

$(".A").hover(function() {
    $(this).find(".C").toggle();
});

Answer 2

使用上下文将查找范围缩小到所需元素的子元素。

$(".A").hover(function () {
   $(".C", this).toggle();
});

Answer 3

使用hover()，hover函数的正确格式是：

$(".A").hover(
  function () {
    // A function to execute when the mouse pointer enters the element.
    $(this).find(".C").show();
  },
  function () {
    // A function to execute when the mouse pointer leaves the element.
    $(this).find(".C").hide();
  }
);