2011-02-11 51 views
3

我有以下的jQuery:jQuery的切換上的mouseup

$('#account-menu').hide(); 

$("#account-link").click(function(e) { 
    e.preventDefault(); 
    $("#account-menu").toggle(); 
    $("#account-link").toggleClass("selected"); 
}); 

我想要做的是檢查如果用戶點擊屏幕上的任何地方而賬戶菜單顯示而不是賬戶菜單本身內,如果是的話就隱藏菜單。誰能幫忙?

感謝

編輯: 我了個去,在這樣做我自己,像這樣:

$('#account-menu').hide(); 

    $("#account-link").click(function(e) { 
     e.preventDefault(); 
     $("#account-menu").toggle('fast'); 
     $("#account-link").toggleClass("selected"); 
    }); 

    $(document).mouseup(function(e) { 
     var $targ = $(e.target); 

     // if we are the link or the box, exit early 
     if ($targ.is('#account-link') || $targ.is('#account-menu')) return; 
     // if we have a parent who is either, also exit early 
     if ($targ.closest('#account-link, #account-menu').length) return; 

     // hide the box, unselect the link 
     $("#account-link").removeClass("selected"); 
     $("#account-menu").hide('fast'); 
    }); 

但想看看是否有一個更好的和做的要小得多(代碼明智)方式它。

+0

請看我下面的`UPDATE#2`。在JSFiddle上工作。 – Dutchie432 2011-02-14 14:09:54

回答

1

也許這樣的事情...

$('#account-menu').hide(); 

$('body').click(function(){ 
    $("#account-menu:visible').toggle(); 
    $("#account-link").removeClass("selected"); 
}); 

$("#account-link").click(function(e) { 
    e.preventDefault(); 
    $("#account-menu:not:visible").toggle(); 
    $("#account-link").addClass("selected"); 
}); 

UPDATE

因此,這將無法完全正常工作,因爲身體的點擊,當你點擊鏈接也觸發。這是朝正確方向邁出的一步。克/升

更新#2

我終於得到這個工作在上JSFiddle.net,在意見從Joseph Le Brech(+1)。 Check out the live Demo。我無法在那裏找到$('body')選擇器,所以我使用名爲bodyDiv的div來模擬身體。這是所有評論和工作100%。快樂編碼。

+1

當按鈕懸停時添加一個類,然後在身體測試中查看當前哪個按鈕懸停。 – 2011-02-11 13:54:20