jQuery Toggle 函数与 Mouseup 冲突答案

【问题标题】：jQuery Toggle function conflicts with MouseupjQuery Toggle 函数与 Mouseup 冲突
【发布时间】：2012-01-02 14:48:15
【问题描述】：

我正在尝试创建一个下拉菜单，可以使用切换按钮打开和关闭它并且也可以通过单击文档本身的任意位置来关闭它。

当用户单击“切换”按钮时，菜单会正确打开。如果访问者随后单击文档上的任何其他位置，菜单将关闭但需要 2 次单击 才能再次激活该按钮的切换功能。当然，我想再次将其减少到 1 次点击。

查看http://jsfiddle.net/MEweN/3/ 了解此问题。谁能帮帮我？

【问题讨论】：

标签： jquery drop-down-menu toggle conflict mouseup

【解决方案1】：

Toggle 将其状态保存在您调用它的对象上。每次调用 Toggle 时，它都会在函数 1 和函数 2 之间交替。它对您的应用程序一无所知。它只是在您每次调用它时传递的两个函数之间交替。

当您在不使用 Toggle 的情况下重置弹出窗口的状态时，它会不同步，因为它现在不知道您想要返回到第一个状态。因此，当您再次单击时，它会在您希望它执行第一个功能时执行第二个功能。

解决此问题的最佳方法是使用比 Toggle 更智能的东西。您需要检测弹出窗口是否打开并采取相应措施，或者存储一些关于它是否打开的状态。您不能使用 Toggle，因为它对您的应用程序来说不够智能。

在使用您的实际代码时，我还发现处理文档中的 mouseup 事件与处理对象中的单击事件不太兼容。问题是 mouseup 在单击之前出现，因此您将按顺序获得这两个事件并且您不会获得您想要的效果。当我更改为在文档中单击时，它会像这样轻松得多：

$("#general_show").click(function () {
    var $this = $(this);
    if ($this.hasClass('selected')) {
        $this.removeClass('selected').parent().next().hide();
    } else {
        $this.addClass('selected').parent().next().show();
    }
    return(false);
});

$(document).click(function (e) {
    if ($('#general_info').is(':visible') &&
          $(e.target).parents('#general_info').length === 0) {
      $('#general_show').removeClass('selected').parent().next().hide();
      return(false);
    }
});

工作示例：http://jsfiddle.net/jfriend00/KTNAq/

【讨论】：

谢谢！出色的解决方案和反馈。

【解决方案2】：

  $("#general_show").click(function () {
      if( $(this).is('.selected') ){
          $(this).removeClass().parent().next().hide()
      }else{
          $(this).addClass('selected').parent().next().show()
      }
  });

  $(document).mouseup(function (e) {
    if (
        $('#general_show').is('.selected')
        && $(e.target).parents('#general_info').length === 0 
        && $(e.target).attr('id')!== "general_show"
    ) {
      $('#general_show').click()
    }
  });

【讨论】：

【解决方案3】：

$("#general_show").click(function () {
    if ( $('#general_info').is(':visible') ){
        // Hiding informations 

        $(this).removeClass('selected').parent().next().hide(); // try to always pass argument to removeClass, which class you want to remove
     } else {
        // Showin informations     
        $(this).addClass('selected').parent().next().show();

  }});

$(document).mouseup(function (e) {
    // We don't want to use this function when clicked on button
    if (e.target.id == 'general_show') return;

    if ( $('#general_info').is(':visible') ){

          $('#general_show').removeClass().parent().next().hide();
       }
});

JSFiddle 链接：http://jsfiddle.net/MEweN/5/

【讨论】：