jQuery 可见性：可见/隐藏 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10392987/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
visibility:visible/hidden div
提问by Scott Robertson
What is the best way to show a div when clicked on a button and then hide it with a close button??
单击按钮时显示 div 然后用关闭按钮隐藏它的最佳方法是什么？
My Jquery code is as follows:
我的 Jquery 代码如下：
$(".imageIcon").click(function(){
$('.imageShowWrapper').css("visibility", 'visible');
});
$(".imageShowWrapper").click(function(){
$('.imageShowWrapper').css("visibility", 'hidden');
});
except the problem I'm having is it closes automatically without any clicks. It loads everything ok, displays for about 1/2 sec and then closes. Any ideas?
除了我遇到的问题是它无需任何点击即可自动关闭。它加载一切正常，显示大约 1/2 秒然后关闭。有任何想法吗？
回答by undefined
You can use the showand hidemethods:
您可以使用show和hide方法：
$(".imageIcon").click(function() {
$('.imageShowWrapper').show();
});
$(".imageShowWrapper").click(function() {
$(this).hide();
});
回答by Linmic
According to your requirement, I believe what you need is as simple as this: http://jsfiddle.net/linmic/6Yadu/
根据您的要求，我相信您需要的就这么简单：http: //jsfiddle.net/linmic/6Yadu/
However, using the visibility is different from using show/hide function, gory details: What is the difference between visibility:hidden and display:none?
但是，使用可见性与使用显示/隐藏功能不同，血腥细节：可见性：隐藏和显示：无之间有什么区别？
回答by brains911
Another option:
另外一个选项：
$(".imageIcon, .imageShowWrapper").click(function() {
$(".imageShowWrapper").toggle($(this).hasClass('imageIcon'));
});
You can also use fadeToggleand slideToggle
您还可以使用fadeToggle和slideToggle
回答by Sampson
You would get a smoother transition using the fade methods:
使用淡入淡出方法可以获得更平滑的过渡：
var imageIcon = $(".imageIcon"),
imageShowWrapper = $(".imageShowWrapper");
imageIcon.on("click", function(){
imageShowWrapper.stop().fadeIn();
});
imageShowWrapper.on("click", function(){
$(this).stop().fadeOut();
});
回答by arychj
$(".imageIcon, .imageShowWrapper").click(function(){
$('.imageShowWrapper').toggle();
});
回答by Binita Bharati
Tough to say without seeing your html and jquery part of the code. But, looks like the part where you show/hide the div is getting affected by page reload ? You might be placing the code that shows/hide div inside a$(document).ready(function() { .....})block. Also, another related point to note would be that whenever html elements like button, anchor etc is clicked, the click is considered to be of default type = submit, and the page will reload under this situation too.To stop that, one could use event.preventDefault()
如果没有看到代码的 html 和 jquery 部分，很难说。但是，看起来您显示/隐藏 div 的部分受到页面重新加载的影响？您可能将显示/隐藏 div 的代码放置在$(document).ready(function() { .....})块内。此外，另一个需要注意的相关点是，每当点击按钮、锚点等 html 元素时，点击被认为是默认类型 = 提交，并且页面也会在这种情况下重新加载。要停止这种情况，可以使用event.preventDefault()
