Видимость: видимый/скрытый div

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

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

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

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

Ответы

Ответ 1

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

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

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

Ответ 2

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

Однако использование видимости отличается от использования функции show/hide, gory details: В чем разница между видимостью: скрытой и отображаемой: нет?

Ответ 3

Другая опция:

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

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

Ответ 4

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

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

Ответ 5

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

Ответ 6

Сложно сказать, не видя HTML и JQuery часть кода. Но, похоже, часть, где вы показываете/скрываете div, подвержена перезагрузке страницы? Возможно, вы размещаете код, который показывает/скрывает div внутри блока $(document).ready(function() {.....}). Кроме того, еще один связанный с этим момент, который следует отметить, заключается в том, что всякий раз, когда щелкаются такие элементы HTML, как кнопка, привязка и т.д., Считается, что щелчок имеет тип по умолчанию тип = submit, и страница также будет перезагружаться в этой ситуации. Чтобы остановить это, можно использовать event.preventDefault()