jQuery切换功能与Mouseup冲突

Question

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

当一个人点击切换按钮时，菜单会正常打开。如果访问者点击文档的其他任何位置，菜单将关闭，但需要需要2点击以再次激活该按钮的切换功能。当然，我想再次减少到1再次点击。

检查出http://jsfiddle.net/MEweN/3/这个问题。任何人都可以帮我吗？

Answer 1

切换将其状态保存在您调用它的对象上。每次调用Toggle时，它都在函数1和函数2之间交替。它对你的应用程序没有任何其他知识。它只是在您每次调用它时传递的两个函数之间交替。

当您在不使用切换的情况下重置弹出状态时，它不同步，因为它现在不知道要返回到第一个状态。所以，当你再次点击时，它会在你想要执行第一个函数时执行第二个函数。

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

在处理您的实际代码时，我还发现处理文档中的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/

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

Answer 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/