1

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

jsfiddle 演示

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

3 回答 3

3

文档解释了这一切：

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

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

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

  • 单击[奇数]：显示

  • 点击[偶数]：隐藏

  • 点击1：显示

  • 点击1：显示
  • 点击2：隐藏
  • 点击3：显示
  • 点击4：隐藏
  • 点击5：显示
  • mouseleave：隐藏
  • click 6: Hide // 注意#dropdown这里已经隐藏了，但无论如何，这是一个偶数点击。单击一次，您将再次隐藏它。
  • click 7: Show // 点击两次显示。

无论如何，这就是你的问题的解释。致力于解决方案。

解决方案

手动触发click事件。

代替：

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

和：

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

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

于 2012-05-18T12:54:00.737 回答
1

逻辑上，

您首先单击menu，dropdown出现 。你（它消失了）mouseleave。dropdown

现在，当您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/

于 2012-05-18T12:38:19.640 回答
0

希望这会奏效。

$('#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();
}
);
于 2012-05-18T12:57:25.197 回答