Появление исчезание элемента на hover jquery

Question

jQuery(document).ready(function() {
  jQuery('#menu-main .dropdown a').click(function(e) {
    e.preventDefault();
    
    $(".sub-menu").not($(this).parent().children('.sub-menu:first')).hide();
    
    if (jQuery(this).parent().children('.sub-menu:first').is(':visible')) {
      jQuery(this).parent().children('.sub-menu:first').hide();
    } else {
      jQuery(this).parent().children('.sub-menu:first').show();
    }
  });
});

#menu-main .dropdown .sub-menu {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu-main">
  <li class="dropdown">
    <a>пункт-1</a>
    <ul class="sub-menu">
      <li>
        <a>1</a>
      </li>
      <li>
        <a>2</a>
      </li>
    </ul>
  </li>

  <li class="dropdown">
    <a>пункт-2</a>
    <ul class="sub-menu">
      <li>
        <a>1</a>
      </li>
      <li>
        <a>2</a>
      </li>
    </ul>
  </li>

  <li class="dropdown">
    <a>пункт-3</a>
    <ul class="sub-menu">
      <li>
        <a>1</a>
      </li>
      <li>
        <a>2</a>
      </li>
    </ul>
  </li>

  <li class="dropdown">
    <a>пункт-4</a>
    <ul class="sub-menu">
      <li>
        <a>1</a>
      </li>
      <li>
        <a>2</a>
      </li>
    </ul>
  </li>
</ul>

Если просто кликать по элементу, то все работает отлично, но мне нужно что бы так же отработало и при hover. я добавил к этому коду еще кусок , но так не работает.

    $(document).ready(function(){
  $('#menu-main .dropdown a').hover(
    function() {
        jQuery(this).parent().children('.sub-menu:first').show();
    }, function() {
          $(".sub-menu").not($(this).parent().children('.sub-menu:first')).hide();
    }
  );
});

Answer 1

Сделал вот так. Думаю, подойдет.

$(document).ready(function(){
$('.dropdown').hover(
        function(){
            $(this).children('.sub-menu').slideDown(300);
        },
        function(){
            $(this).children('.sub-menu').slideUp(300);
        }
    );
});

#menu-main .dropdown .sub-menu {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu-main">
  <li class="dropdown">
    <a>пункт-1</a>
    <ul class="sub-menu">
      <li>
        <a>1</a>
      </li>
      <li>
        <a>2</a>
      </li>
    </ul>
  </li>

  <li class="dropdown">
    <a>пункт-2</a>
    <ul class="sub-menu">
      <li>
        <a>1</a>
      </li>
      <li>
        <a>2</a>
      </li>
    </ul>
  </li>

  <li class="dropdown">
    <a>пункт-3</a>
    <ul class="sub-menu">
      <li>
        <a>1</a>
      </li>
      <li>
        <a>2</a>
      </li>
    </ul>
  </li>

  <li class="dropdown">
    <a>пункт-4</a>
    <ul class="sub-menu">
      <li>
        <a>1</a>
      </li>
      <li>
        <a>2</a>
      </li>
    </ul>
  </li>
</ul>

Answer 2

А зачем вообще для этих целей jquery?

#menu-main .dropdown .sub-menu {
  overflow: hidden;
  transition: .5s;
  height: auto;
  max-height: 0;
}
#menu-main .dropdown:hover .sub-menu {
  max-height: 100px;
}

<ul id="menu-main">
  <li class="dropdown">
    <a>пункт-1</a>
    <ul class="sub-menu">
      <li>
        <a>1</a>
      </li>
      <li>
        <a>2</a>
      </li>
    </ul>
  </li>

  <li class="dropdown">
    <a>пункт-2</a>
    <ul class="sub-menu">
      <li>
        <a>1</a>
      </li>
      <li>
        <a>2</a>
      </li>
    </ul>
  </li>

  <li class="dropdown">
    <a>пункт-3</a>
    <ul class="sub-menu">
      <li>
        <a>1</a>
      </li>
      <li>
        <a>2</a>
      </li>
    </ul>
  </li>

  <li class="dropdown">
    <a>пункт-4</a>
    <ul class="sub-menu">
      <li>
        <a>1</a>
      </li>
      <li>
        <a>2</a>
      </li>
    </ul>
  </li>
</ul>

БЛОГ НА HUSL

Появление исчезание элемента на hover jquery

Ответы (2 шт):