在 .toggle() 用户在 jQuery 中使用 .mouseleave() 后单击两次

Question

当用户切换$('#menu'); 按钮时，他们没有问题。但是，当用户将鼠标离开$('#dropdown'); 然后单击返回$('#menu'); 时，他们必须单击两次才能使切换再次起作用。我是不是做错了什么？

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

docs 说明一切：

.toggle( handler(eventObject), handler(eventObject) [, handler(eventObject)] ) handler(eventObject) 每次点击元素时执行的函数。 handler(eventObject) 每次点击元素时执行的函数。

.toggle() 方法为点击事件绑定了一个处理程序，因此这里也适用于触发点击的规则。

换句话说，toggle() 基于偶数和奇数 click 事件交替出现。所以：

• 点击[奇数]：显示

• 点击[偶数]：隐藏

• 点击1：显示

• 点击 1：显示
• 点击 2：隐藏
• 点击 3：显示
• 点击 4：隐藏
• 点击 5：显示
• 鼠标离开：隐藏
• click 6: Hide // 注意#dropdown 已经隐藏在这里，但无论如何，这是一个均匀点击。单击一次，您将再次隐藏它。
• 单击 7：显示 // 单击两次即可显示。

无论如何，这就是您的问题的解释。正在研究解决方案。

---

解决方案

手动触发click事件。

替换：

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

与：

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

演示：http://jsfiddle.net/aymansafadi/BF8p6/2/

Answer 2

逻辑上，

你首先点击menu，dropdown出现。你mouseleavedropdown（它消失了）。

现在，当你点击menu第二次时，它会执行.toggle()函数的“第二半”（即.fadeOut()dropdown）。

之后，当您再次单击menu 时，它会执行.toggle() 的“前半部分”，一切看起来都很愉快。

编辑

您可以尝试使用flag 的概念。

var menu = $('#menu');
var dropdown = $('#dropdown');
var flag = 'reset';

menu.click(function () {
    if(flag == 'reset')
    {
        menu.addClass('active');
        dropdown.fadeIn();
        flag = 'set';
    }
    else if(flag =='set')
    {
        flag = 'reset'; 
        menu.removeClass('active');
        dropdown.fadeOut();                               
        return false;
    }
});

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

jsFiddle：http://jsfiddle.net/BF8p6/1/

Answer 3

希望这会奏效。

$('#menu').click(
function () {

if ($("#dropdown:visible"))
{
$('.mapNavLeft').removeClass("active");
$(this).next('#dropdown')fadeOut();
} else {
$(this).addClass("active");
$(this).next('#dropdown')fadeIn();
}

});

$("#dropdown").hover(
function () {
  return false;
},
function () {
  $(this).fadeOut();
}
);