Aftering.toggle（）用户在jQuery中使用.mouseleave（）后单击两次

当用户切换

$（'#菜单'）按钮，它们没有问题。但是，当用户鼠标移动
$（“#下拉菜单”）时然后单击返回
$（“#菜单”）他们必须单击两次才能使切换再次工作。我做错什么了吗


=============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>

    //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;
});

从逻辑上讲

首先单击
菜单
，出现
下拉列表
。您可以将鼠标移动到
下拉列表中（它会消失）

现在，当您第二次单击
菜单时，它将执行
.toggle（）
函数的“第二部分”（即
.fadeOut（）
下拉列表
）

之后，当您再次单击
菜单时，它将执行
.toggle（）
的“前半部分”，一切看起来都很愉快

编辑

您可以尝试使用
标志
的概念

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;
});

jsIDLE:
逻辑上

首先单击
菜单
，出现
下拉列表
。您可以将鼠标移动到
下拉列表中（它会消失）

现在，当您第二次单击
菜单时，它将执行
.toggle（）
函数的“第二部分”（即
.fadeOut（）
下拉列表
）

之后，当您再次单击
菜单时，它将执行
.toggle（）
的“前半部分”，一切看起来都很愉快

编辑

您可以尝试使用
标志
的概念

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;
});

jshiddle:
解释一切：

.toggle（处理程序（eventObject），处理程序（eventObject）[，处理程序（eventObject）]）
handler（eventObject）每次单击元素时都要执行的函数。
处理程序（eventObject）每次单击元素时执行的函数

.toggle（）方法为click事件绑定了一个处理程序，因此触发click的规则也适用于此处

换句话说，
toggle（）
根据偶数和奇数
单击事件进行交替。因此：


单击[奇数]：显示
单击[偶数]：隐藏

单击1：显示

单击1：显示
单击2：隐藏
单击3：显示
单击4：隐藏
单击5：显示
老鼠：藏起来
单击6:Hide//注意这里已经隐藏了
#下拉列表
，但不管怎样，它是一个偶数单击。单击一次，您将再次隐藏它
单击7：显示//单击两次以显示

不管怎样，这就是你问题的解释。正在研究解决方案


解决方案

手动触发
单击
事件

替换：

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

与：

演示：
讲解所有内容：

.toggle（处理程序（eventObject），处理程序（eventObject）[，处理程序（eventObject）]）
handler（eventObject）每次单击元素时都要执行的函数。
处理程序（eventObject）每次单击元素时执行的函数

.toggle（）方法为click事件绑定了一个处理程序，因此触发click的规则也适用于此处

换句话说，
toggle（）
根据偶数和奇数
单击事件进行交替。因此：


单击[奇数]：显示
单击[偶数]：隐藏

单击1：显示

单击1：显示
单击2：隐藏
单击3：显示
单击4：隐藏
单击5：显示
老鼠：藏起来
单击6:Hide//注意这里已经隐藏了
#下拉列表
，但不管怎样，它是一个偶数单击。单击一次，您将再次隐藏它
单击7：显示//单击两次以显示

不管怎样，这就是你问题的解释。正在研究解决方案


解决方案

手动触发
单击
事件

替换：

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

与：

演示：
希望这能奏效

$('#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();
}
);

希望这能奏效

$('#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();
}
);

创建一个
jsFiddle
，让我们更容易理解您试图实现的目标，并为您提供一些提示。你能帮助我吗？这就是你需要开始做的：-）创建一个
jsFiddle
，让我们更容易理解你想要达到的目标。你能帮助我吗？这是您需要开始制作的：-）中途。。。如何返回到切换的前半部分？在Firefox中测试，它有点错误。它也在做同样的事情。我还在IE7中测试了它，没有骰子。我必须单击两次才能使切换再次工作。您需要调试并检查
标志
值是否正确更改？我会花一些时间来检查FX和IE7，我是说它不完全工作。这正是我开始做的。中途。。。如何返回到切换的前半部分？在Firefox中测试，它有点错误。它也在做同样的事情。我还在IE7中测试了它，没有骰子。我必须单击两次才能使切换再次工作。您需要调试并检查
标志
值是否正确更改？我会花一些时间来检查FX和IE7，我是说它不完全工作。这正是我开始做的。