Показывать только дочерние элементы текущего div мыши: jQuery

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

Я бы посоветовал вам справиться с этим только с помощью CSS. Нет необходимости использовать JavaScript для обработки того, что вы хотите сделать.

Я предполагаю, что вы хотите отобразить подкатегории, когда пользователь наводит указатель мыши на элемент .cat-parent. Следующий стиль сделает работу:

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

Чтобы сломать это. Этот селектор означает, что любой элемент ul с классом children, который вложен в элемент с классом .cat-parent, получит вышеуказанный стиль при наведении элемента .cat-parent (hover в основном так же, как при наведении курсора.) И как только вы отводите мышь от элемента, субселектор :hover исчезает, а display возвращается к none.

Так что вам не понадобится код jQuery. Вам нужно только добавить вышеуказанный стиль в свой файл CSS (или в тег стиля в файле HTML, если вы не используете файл CSS).

Большим преимуществом обработки логики проектирования такого типа с использованием чистого CSS является то, что она работает даже в браузерах, в которых отключен JavaScript.

Answer 2

Ваш селектор неверен.Для этой работы вам нужно использовать $(".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>