可见性：可见/隐藏的 div答案

【问题标题】：visibility:visible/hidden div可见性：可见/隐藏的 div
【发布时间】：2012-05-10 16:50:42
【问题描述】：

单击按钮时显示 div 然后用关闭按钮隐藏它的最佳方法是什么？？

我的jquery代码如下：

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

除了我遇到的问题是它会自动关闭而无需任何点击。它加载一切正常，显示约 1/2 秒，然后关闭。有什么想法吗？

【问题讨论】：

标签： jquery css html visibility

【解决方案1】：

很难说没有看到你的代码的 html 和 jquery 部分。但是，看起来您显示/隐藏 div 的部分受到页面重新加载的影响？您可能会将显示/隐藏 div 的代码放在$(document).ready(function() { .....}) 块内。此外，需要注意的另一个相关点是，每当单击按钮、锚点等 html 元素时，单击被认为是默认类型 = 提交，并且在这种情况下页面也会重新加载。要停止这种情况，可以使用event.preventDefault()

【讨论】：

【解决方案2】：

您可以使用show 和hide 方法：

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

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

【讨论】：

嘿，谢谢你的回复，我想先隐藏 div，我需要使用相同的函数 hide() 还是只使用 CSS 的可见性属性
@Scott Robertson，不客气，您可以将 div 隐藏在事件处理程序之外，将 display:none 隐藏到一个元素。
嗯，也许我没有正确实现它，我还在学习很多这些东西。在我的 CSS 文件中，我将 display:none 放在 imageShowWrapper 的属性中，但现在 Jquery 不会影响 div
我的脚本显然还有其他问题阻止了它的工作，感谢所有回复

【解决方案3】：

根据你的要求，我相信你需要的就这么简单：http://jsfiddle.net/linmic/6Yadu/

但是，使用可见性与使用显示/隐藏功能不同，血腥细节：What is the difference between visibility:hidden and display:none?

【讨论】：

这正是我想要的，几乎就是我的原始代码，只是由于某种原因它不起作用。感谢回复

【解决方案4】：

另一种选择：

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

您也可以使用fadeToggle 和slideToggle

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

您会使用淡入淡出方法获得更平滑的过渡：

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

【讨论】：