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

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

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

Answer 3

另一种选择：

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

您还可以使用fadeToggle和slideToggle

Answer 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

Answer 5

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

Answer 6

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

可见性：可见/隐藏div

6 个答案: