toggle- ẩn mục khi nhấp bên ngoài div

Question

Tôi đang sử dụng jidery's slidetoggle, muốn tìm hiểu cách ẩn lớp showup khi nhấp vào bất kỳ đâu bên ngoài DIV. cảm ơn!

MẪU Online: http://jsfiddle.net/evGd6/

<div class="click">click me</div> 
<div class="showup">something I want to show</div>​ 

$(document).ready(function(){ 
    $('.click').click(function(){ 
     $(".showup").slideToggle("fast"); 
    }); 
});​ 

.showup { 
    width: 100px; 
    height: 100px; 
    background: red; 
    display:none; 
} 
.click { 
    cursor: pointer; 
} 
    ​ 

Answer 1

Dừng sự kiện tuyên truyền tại khu vực .showup:

$(document).on("click", function() { 
    $(".showup").hide(); 
}); 

Sau đó ngăn chặn các nhấp chuột trên .showup từ bọt lên đến document:

$(".showup").on("click", function (event) { 
    event.stopPropagation(); 
}); 

Bất kỳ sự kiện nhấp chuột nào đạt đến số document sẽ dẫn đến phần tử .showup bị ẩn. Bất kỳ sự kiện nhấp chuột nào bắt đầu từ trong phạm vi .showup sẽ bị ngăn không cho tiến hành thêm bất kỳ cây DOM nào nữa và do đó sẽ không bao giờ đạt đến số document.

Bạn cũng sẽ cần phải dừng lại bất kỳ nhấp chuột vào nút của bạn từ đi du lịch đến document cũng như:

$(".click").on("click", function (event) { 
    event.stopPropagation(); 
    $(".showup").slideToggle("fast"); 
}); 

Nếu không có sự kiện nhấp chuột sẽ và bong bóng lên đến document dẫn đến việc cất giấu .showup ngay lập tức.

Bản trình diễn: http://jsfiddle.net/evGd6/2/