видимость: видимая/скрытая div

Question

Каков наилучший способ показать div при нажатии на кнопку, а затем скрыть его кнопкой закрытия?

Мой Jquery код выглядит следующим образом:

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

кроме проблема, у меня он автоматически закрывается без каких-либо щелчков мыши. Он загружает все в порядке, отображает около 1/2 секунды, а затем закрывается. Есть идеи?

Answer 1

Вы можете использовать show и hide методы:

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

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

Answer 2

Вы хотите получить более плавный переход, используя методы выцветанию:

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

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

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

Демо: http://jsbin.com/uhapom/edit#javascript,html,live

Answer 3

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

Answer 4

Другой вариант :

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

Вы также можете использовать fadeToggle и slideToggle

Answer 5

По вашему требованию, я считаю, что вам нужно, это так просто, как это: http://jsfiddle.net/linmic/6Yadu/

Однако, используя видимость отличается от использования шоу/скрыть функцию, gory подробнее: What is the difference between visibility:hidden and display:none?