khả năng hiển thị: hiển thị/ẩn div

Question

Cách tốt nhất để hiển thị div khi được nhấp vào nút và sau đó ẩn nó bằng nút đóng là gì ??

mã jQuery của tôi là như sau:

$(".imageIcon").click(function(){ 
$('.imageShowWrapper').css("visibility", 'visible'); 
}); 
$(".imageShowWrapper").click(function(){ 
$('.imageShowWrapper').css("visibility", 'hidden'); 
}); 

trừ vấn đề tôi đang gặp là nó tự động đóng mà không cần bất kỳ nhấp chuột. Nó tải mọi thứ ok, hiển thị trong khoảng 1/2 giây và sau đó đóng lại. Bất kỳ ý tưởng?

Answer 1

Bạn có thể sử dụng show và hide phương pháp:

$(".imageIcon").click(function() { 
    $('.imageShowWrapper').show(); 
}); 

$(".imageShowWrapper").click(function() { 
    $(this).hide(); 
}); 

Answer 2

Bạn sẽ nhận được một sự chuyển tiếp mượt mà bằng cách sử dụng phương pháp phai:

var imageIcon = $(".imageIcon"), 
    imageShowWrapper = $(".imageShowWrapper"); 

imageIcon.on("click", function(){ 
    imageShowWrapper.stop().fadeIn(); 
}); 

imageShowWrapper.on("click", function(){ 
    $(this).stop().fadeOut(); 
}); 

Demo: http://jsbin.com/uhapom/edit#javascript,html,live

Answer 3

$(".imageIcon, .imageShowWrapper").click(function(){ 
    $('.imageShowWrapper').toggle(); 
}); 

Answer 4

Một lựa chọn khác :

$(".imageIcon, .imageShowWrapper").click(function() { 
    $(".imageShowWrapper").toggle($(this).hasClass('imageIcon'));  
}); 

Bạn cũng có thể sử dụng fadeToggle và slideToggle

Answer 5

Theo yêu cầu của bạn, tôi tin rằng những gì bạn cần là đơn giản như này: http://jsfiddle.net/linmic/6Yadu/

Tuy nhiên, sử dụng khả năng hiển thị là khác nhau từ việc sử dụng chương trình/ẩn chức năng, chi tiết gory: What is the difference between visibility:hidden and display:none?