Question

我的类别包含子类别，第一次所有子类别的子类别都不可见，我希望将鼠标移到类别编号上时显示此当前类别的子类别，并在找到鼠标时它们返回不可见

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类的元素中的任何具有children类的.cat-parent元素将在.cat-parent元素时具有上述样式悬停（悬停与鼠标悬停基本相同）。并且，只要将鼠标从该元素上拉开，:hover子选择器就会消失，display返回到none。

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

使用纯CSS处理这种设计逻辑的一大好处是，即使在关闭了JavaScript的浏览器上，它也可以工作。

仅显示当前mouseover div的子级：jQuery

2 个答案: