Question

When users toggle the $('#menu'); button, they have no problem. However, when users mouseleaves the $('#dropdown'); then click back the $('#menu'); they have to click twice in order for the toggle to work again. Am I doing something wrong?

jsfiddle demo

===========HTML===========

<a class="" href="javascript:;" id="menu"></a>
<div style="display: none;" id="dropdown">
  <div id="wrap">
    <div class="menu-section">
      <div class="menu-header-section">
        <h3>Header</h3>
      </div>
      <div class="menu-list">
        <ul class="list">
          <li><a href="#">link</a></li>
          <li><a href="#">link</a></li>
        </ul>
      </div>
    </div>
  </div>
  <a href="javascript:;" class="closeThis">close</a> </div>
</div>

===========jQuery===========

    //menu
var menu = $('#menu');
var dropdown = $('#dropdown');

menu.toggle(function () {
    menu.addClass('active');
    dropdown.fadeIn();
}, function () {
    menu.removeClass('active');
    dropdown.fadeOut();
    return false;
});
dropdown.mouseleave(function () {
    menu.removeClass('active');
    dropdown.fadeOut();
    return menu;
});

Answer 1

The docs explain it all:

.toggle( handler(eventObject), handler(eventObject) [, handler(eventObject)] )
handler(eventObject) A function to execute every even time the element is clicked.
handler(eventObject) A function to execute every odd time the element is clicked.

The .toggle() method binds a handler for the click event, so the rules outlined for the triggering of click apply here as well.

In other words, toggle() alternates based on even and odd click events. So:

• click [odd]: Show

• click [even]: Hide

• click 1: Show

• click 1: Show
• click 2: Hide
• click 3: Show
• click 4: Hide
• click 5: Show
• mouseleave: Hide
• click 6: Hide // Notice that #dropdown is already hidden here, but regardless, it’s an even click. Click once, and you’re hiding it again.
• click 7: Show // Click twice to show.

Anyways, that’s the explenation for your problem. Working on solution.

---

Solution

Manually trigger the click event.

Replace:

dropdown.mouseleave(function () {
    menu.removeClass('active');
    dropdown.fadeOut();
    return menu;
});

With:

dropdown.mouseleave(function () {
    menu.trigger('click');
});

Demo: http://jsfiddle.net/aymansafadi/BF8p6/2/