仅显示当前鼠标悬停的子项 div :jQuery

Question

我的类别有子类别，第一次所有子类别的子类别都是不可见的，我希望当我将鼠标移到类别编号上时显示当前类别的子类别，当我找到鼠标时它们 return看不见

Html:

<ul class="product-categories">
   <li class="cat-item  cat-parent">
      <span class="icon-toggle"></span><a href="">Baby</a>
      <ul class="children" style="display: none">
         <li class="cat-item  cat-parent">
            <span class="icon-toggle"></span><a href="">Baby Girl</a>
            <ul class="children" style="display: none">
               <li class="cat-item "><span class="icon-toggle"></span><a href="">Accessories</a></li>
               <li class="cat-item "><span class="icon-toggle"></span><a href="">Bodysuits</a></li>
        </li>
            </ul>
        <li class="cat-item  cat-parent">
            <span class="icon-toggle"></span><a href="">Baby Boy</a>
            <ul class="children" style="display: none">
               <li class="cat-item "><span class="icon-toggle"></span><a href="">Accessories</a></li>
            </ul>
        </li>
      </ul>
   </li>
   <li class="cat-item  cat-parent">
      <span class="icon-toggle"></span><a href=">Boy</a>
   </li>
   <li class="cat-item  cat-parent">
      <span class="icon-toggle"></span><a href="">Girl</a>
      <ul class="children" style="display: none">
             <li class="cat-item "><span class="icon-toggle"></span><a href="">Shoes</a></li>
      </ul>
   </li>
   <li class="cat-item  cat-parent">
      <span class="icon-toggle"></span><a href="">Nursery Furnishings</a>
      <ul class="children" style="display: none">
          <li class="cat-item "><span class="icon-toggle"></span><a href="">Pushchairs &amp; Prams</a></li>
         <li class="cat-item "><span class="icon-toggle"></span><a href="">Pushchairs's accessories&nbsp;</a></li>
         <li class="cat-item "><span class="icon-toggle"></span><a href="">Travel accessories</a></li>
      </ul>
   </li>
</ul>

jquery:

jQuery(".cat-parent").on("mouseover", function () {
  jQuery( this " .children" ).css({'display': "block"});
});

Answer 1

您的选择器不正确。您需要使用 $(".children", this) 或 .find() 来完成这项工作。

jQuery(".children", this).css({'display': "block"});
// Or
jQuery(this).find(".children").css({'display': "block"});

您还可以使用 mouseout 事件在鼠标离开后隐藏元素。

jQuery(".cat-parent").on("mouseover", function () {
  jQuery(".children", this).css({'display': "block"});
}).on("mouseout", function(){
  jQuery(".children", this).css({'display': "none"});
});

jQuery(".cat-parent").on("mouseover", function () {
  jQuery( " .children" , this).css({'display': "block"});
}).on("mouseout", function(){
  jQuery( " .children" , this).css({'display': "none"});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="product-categories">
  <li class="cat-item  cat-parent">
    <span class="icon-toggle"></span><a href="">Baby</a>
    <ul class="children" style="display: none">
      <li class="cat-item  cat-parent">
        <span class="icon-toggle"></span><a href="">Baby Girl</a>
        <ul class="children" style="display: none">
          <li class="cat-item "><span class="icon-toggle"></span><a href="">Accessories</a></li>
          <li class="cat-item "><span class="icon-toggle"></span><a href="">Bodysuits</a></li>
          </li>
    </ul>
  <li class="cat-item  cat-parent">
    <span class="icon-toggle"></span><a href="">Baby Boy</a>
    <ul class="children" style="display: none">
      <li class="cat-item "><span class="icon-toggle"></span><a href="">Accessories</a></li>
    </ul>
  </li>
</ul>
</li>
<li class="cat-item  cat-parent">
  <span class="icon-toggle"></span><a href=">Boy</a>
    </li>
    <li class="cat-item  cat-parent">
    <span class="icon-toggle"></span><a href="">Girl</a>
    <ul class="children" style="display: none">
    <li class="cat-item "><span class="icon-toggle"></span><a href="">Shoes</a></li>
    </ul>
    </li>
    <li class="cat-item  cat-parent">
    <span class="icon-toggle"></span><a href="">Nursery Furnishings</a>
    <ul class="children" style="display: none">
    <li class="cat-item "><span class="icon-toggle"></span><a href="">Pushchairs &amp; Prams</a></li>
    <li class="cat-item "><span class="icon-toggle"></span><a href="">Pushchairs's accessories&nbsp;</a></li>
    <li class="cat-item "><span class="icon-toggle"></span><a href="">Travel accessories</a></li>
    </ul>
    </li>
    </ul>

Answer 2

我建议您只使用 CSS 来处理这个问题。不需要使用 JavaScript 来处理你想做的事情。

我假设您希望在用户将鼠标移到 .cat-parent 元素上时显示子类别。以下样式将完成这项工作：

.cat-parent:hover ul.children {
  display:block;
}

分解。此选择器意味着任何 ul 元素 class 或 children 嵌套在 class 或 .cat-parent 的元素中将获得上述样式当悬停 .cat-parent 元素时（悬停与鼠标悬停基本相同。）一旦您将鼠标从元素上移开，:hover 子选择器就会消失，并且 display 会返回到 none.

所以您不需要 jQuery 代码。您只需在 CSS 文件中添加上述样式（如果您不使用任何 CSS 文件，则在 HTML 文件中的样式标签中添加。）

使用纯 CSS 处理这种设计逻辑的一大好处是它甚至可以在 JavaScript 关闭的浏览器上运行。

仅显示当前鼠标悬停的子项 div :jQuery

Show only children of current mouseover div :jQuery

html

javascript

jquery

jquery-selectors