点击它时隐藏一个盒子

我说我真的很新鲜，但是我试图学习一些东西，而且我很担心这个事实。点击它时隐藏一个盒子

技术上我只是无法隐藏这个“homebox”，当我点击它。这个盒子上的“点击”功能应该打开一个画廊......但打开它后，它也应该隐藏起来。为什么？因为这个盒子实际上包含了一个较低z-index的图像，而且这个图库的图像在一个更高的z-索引上，所以即时只显示了2张图像，而且看起来真的很糟糕。

<div id="homebox"> 
      <a href="img/gallery/Home/Harris-Wharf-London-man-01.jpg" rel="gallery" class="pirobox_gall16"> 
         <img src="../400x550 man.png" border="0"/> 
      </a> 
      <?PHP 
       $sql_foto = "SELECT * FROM foto WHERE idMenu = '16' ORDER BY nomeFile ASC"; 
       $query_foto = mysql_query($sql_foto); 
       while($fetch_foto = mysql_fetch_array($query_foto)) 
       { 
        $foto = $fetch_foto['nomeFile']; 

        ?> 
        <a href="img/gallery/ID16/<?PHP echo $foto;?>" rel="gallery" class="pirobox_gall16"> 
        </a> 
       <?PHP 
        } 

      ?> 
     </div>

我试着这个脚本，以便使这一点，但正如我所说的，我尝试学习制作东西比传统的HTML网站冷却器，但我想询问始终以提高自己的能力的好方法。

$('#homebox').click(function() { 
    $('#homebox').css('visibility', 'visible') 
});

在此先感谢您的任何建设性答复！

来源

2013-01-11 Mattia Rej XI Cornaglia

试$（ '＃homebox'）的CSS（ '显示'， '无'） – algorhythm

参考：http://www.w3schools.com/jquery/jquery_hide_show.asp –

是你确定当你调用'$（'＃homebox'）。click（function（）{...}'这个元素已经可以被查询找到吗？你在哪里放置了这个查询？ –

请试试这个代码...

$('#homebox').click(function() { 
    $(this).hide(); 
});

或

$('#homebox').click(function() { 
     $(this).SlideUp(); 
    });

来源

2013-01-11 09:32:07

为什么不是$（this）.hide（） – mplungjan

您应该使用'$（this）.hide（）;'而不是'$（'＃homebox'）。hide（）;'如果您指的是被点击。虽然通过ID查询确实很快，但不需要再次这样做。如果选择器改变了，你只需要在一个地方改变它，如果你使用'$（this）'。 –

请使用下面的代码

$('#homebox').click(function() { 
     $(this).hide(); 
    });

来源

2013-01-11 09:32:14

尝试

$('#homebox').click(function() { 
    $('#homebox').css("display", "none"); 
});

来源

2013-01-11 09:36:05 Swarne27

仍然没有办法....我不明白，如果这是一个问题，属于脚本或类..技术上，我用来修改的CSS领域“知名度”“隐藏”，但它没有奏效。但是，如果我只是将“可见性”字段更改为“隐藏”css字段，它实际上隐藏如预期。 –

你可以把你的代码放到http://jsfiddle.net/ – Swarne27

加上hidden班也是一个很好的做法。这样，在浏览DOM时，你可以很容易地看到哪些态的元素有：

$('#homebox').click(function() { 
    $(this).toggleClass('hidden'); 
});

，然后在你的CSS：

.hidden { display: none; visibility: hidden; }

来源

2013-01-11 09:39:22

还是没有办法做到这一点。我不知道这里发生了什么事。 –

@SviatoslavZalishchuk你不能使用你隐藏的元素也是隐藏/显示它的触发器。当它被隐藏时，你不能单击它，因为它不存在于文档流中，并且当元素为'visibility：hidden'时，单击事件不会触发。 – samazi

@SandorA你至少可以这样做一次，如果元素最初是可见的。根据上面提到的问题，我展示了这个例子。当然，应该有切换触发器，或者点击该框只会关闭它（就像我们通常使用覆盖菜单一样）。 –

你应该尝试有您的图片库单独控制。您无法通过使用元素本身来切换可见性或显示元素。一旦它是visibility: hidden;或display:none;它不会触发点击事件，并且在display: none的情况下甚至不会出现在文档流中（尽管它将保留在DOM中）。

我的建议是一个画廊的触发因素，例如添加为

<a href="#" id="gallery-trigger">View Gallery</a>

那么你可以点击事件添加到这个元素来切换您的画廊的知名度。。

document.ready(function() { 
    $('#gallery-trigger').click(function() { 
     $('.homebox').toggle(); 
    }); 
});

http://jsfiddle.net/3leven11/h6YtJ/

来源

2013-01-11 10:20:07 samazi

点击它时隐藏一个盒子

回答

相关问题