jQuery issue binding function in a jQuery menu

Question

I'm trying a simple jQuery menu with submenus showing on hover, if I use "show" and "hide" function, everything Works just fine, but if I bind a function like slideDown or Up, it will repeat the function until the cursor goes out of the binded LI object.

$('.myMenu > li').on('mouseover', openSM);
$('.myMenu > li').on('mouseout', closeSM);

function openSM() {
    $(this).find('ul').show();  
};

function closeSM() {
    $(this).find('ul').hide();  
};

When I set the show() and hide() to slideDown() and slideUp(), it basically repeats on all submenus on it.

<li><a href="#">menu item</a>
   <ul>
        <li><a href="#">sub menu item 1</a></li>
        <li><a href="#">sub menu item 2</a></li>
        <li><a href="#">sub menu item 3</a></li>
        <li><a href="#">sub menu item 4</a></li>
    </ul>
</li>

On every submenu item it will repeat the function... It means it will slideup and down repetitively. Well, what I want to do is to set it to just use the function when it leaves the LI object, not when it's hovering the submenus...

I replace bind with on, but it still don't work with slideDown and Up functions... Any help?

`bind` has been deprecated for a while now, you should be using `on` — Lee Taylor, Nov 08 '14 at 16:51

score 2 · Answer 1 · edited May 23 '17 at 12:22

Use mouseenter and mouseleave instead of mouseover and mouseout. See

Jquery mouseenter() vs mouseover()

for explanations of the difference when there are child elements.

$('.myMenu > li').bind('mouseenter', openSM);

$('.myMenu > li').bind('mouseleave', closeSM);

function openSM() {
  $(this).find('ul').slideDown();
};

function closeSM() {
  $(this).find('ul').slideUp();
};

.myMenu > li ul {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="myMenu">

  <li>
    <a href="#">menu item
      </a>
    <ul>
      <li><a href="#">sub menu item 1</a > </li>
        <li><a href="#">sub menu item 2</a > </li>
        <li><a href="#">sub menu item 3</a > </li>
        <li><a href="#">sub menu item 4</a > </li>
    </ul >
  </li>
        </ul >

score 1 · Answer 2 · answered Nov 08 '14 at 17:17

I just wanted to expand on @Barmar 's answer a little to fix an annoying bug. Pass a callback function to slideUp and slideDown to stop the list from jumping up and down after moving your mouse pointer back and forth over the main list item a bunch of times:

$('.myMenu > li').bind('mouseenter', openSM);

$('.myMenu > li').bind('mouseleave', closeSM);

function openSM() {
  $(this).find('ul').slideDown(function(){
     $(this).stop(true);
  });
};

function closeSM() {
  $(this).find('ul').slideUp(function(){
     $(this).stop(true);
  });
};

.myMenu > li ul {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="myMenu">

  <li>
    <a href="#">menu item
      </a>
    <ul>
      <li><a href="#">sub menu item 1</a > </li>
        <li><a href="#">sub menu item 2</a > </li>
        <li><a href="#">sub menu item 3</a > </li>
        <li><a href="#">sub menu item 4</a > </li>
    </ul >
  </li>
        </ul >

jQuery issue binding function in a jQuery menu

2 Answers2