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/