如何通過單擊文檔中相同的切換按鈕或其他位置來隱藏div

Question

現在，我可以通過單擊按鈕來顯示div，並使用相同的按鈕將其隱藏。這工作正常，但我也想讓用戶能夠點擊新顯示的div或按鈕以外的地方顯示它，並仍然隱藏它。

嘿傢伙，這是我第一次在這裏問一個問題，所以我很抱歉，如果我沒有輸入正確的代碼或東西。基本上我有一個按鈕，我只想要一種方法來打開一個隱藏的div（單擊所述按鈕），但有兩種方法可以關閉它（單擊同一個開始按鈕或文檔中的其他地方）。

這是我目前的代碼。

//This part works fine for opening and closing, but you can't click outside the button to make it close once opened.<br/> 

$(".account").click(function() { 
    $(".accountlinks").toggle(); 
    $(".account").toggleClass("active"); 
}); 

$(document).click(function(e) { 
    $('.accountlinks').hide(); 
    $(".account").removeClass("active"); 
}); 

$('.accountlinks').click(function(e) { 
    e.stopPropagation(); 
}); 

有一些方法，看它是否已打開，然後使用這個$('.account').hasClass('active');以某種方式document.click功能關閉它？

謝謝你的幫助。

Answer 1

這是我的方法：與其將按鈕放置在「活動」類上，不如按照您的操作，我將其分配給div。這樣，您可以使用「活動」類在文檔中選擇打開的div。檢查出來：

$(function() { 
    $("#toggler").click(function(e) { 
     $("#toggled").toggle().toggleClass("active"); 
     e.stopPropagation(); 
    }); 

    $(document).click(function(e) { 
     $('.active').hide().removeClass('active'); 
    }); 

    $("#toggled").click(function(e) { 
     e.stopPropagation(); 
    }); 
}); 

而且這裏有一個演示：http://jsfiddle.net/Ender/xNQN3/