单击时隐藏一个框答案

【问题标题】：Hiding a box while clicking on it单击时隐藏一个框
【发布时间】：2012-12-25 20:34:33
【问题描述】：

我说我在这方面真的是新手，但我想学习一些东西，但我被这个事实困住了。

从技术上讲，当我点击它时，我只是无法隐藏这个“homebox”。这个盒子上的“点击”功能应该打开一个画廊......但打开它后，它也应该隐藏起来。为什么？因为盒子实际上包含较低 z-index 的图像，而画廊有他的图像在较高 z-index 上，所以我只显示了 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') 
});

提前感谢您的任何建设性回复！

【问题讨论】：

试试 $('#homebox').css('display', 'none')
参考：w3schools.com/jquery/jquery_hide_show.asp
您确定在您调用$('#homebox').click(function() { ... } 时已经可以通过查询找到该元素吗？你把那个查询放在哪里了？
您真的希望有人能够通过单击页面的不可见区域来打开图片库吗？为什么不将您的图库容器与控制图库状态的元素分开，然后您可以非常轻松地切换图库的显示。

标签： php jquery class

【解决方案1】：

请使用以下代码

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

【讨论】：

【解决方案2】：

试试

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

【讨论】：

仍然没有办法....我不明白这是属于脚本还是属于类的问题..从技术上讲，我曾经将css字段“可见性”修改为“隐藏”，但它没有用。但是，如果我只是将“可见性”字段更改为 css 字段以“隐藏”它实际上会按预期隐藏。

【解决方案3】：

添加hidden 类也是一个好习惯。这样在浏览 DOM 时，您可以轻松查看元素的状态：

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

然后在你的 CSS 中：

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

【讨论】：

仍然无法完成这项工作。我不知道这里发生了什么。
@SviatoslavZalishchuk 你不能使用你隐藏的元素来触发隐藏/显示它。当它被隐藏时，你不能点击它，因为它在文档流中不存在，并且当元素为visibility:hidden时不会触发点击事件。
@SandorA 如果元素最初可见，您至少可以这样做一次。我根据上面提出的问题显示了这个例子。当然，应该有切换触发器，或者单击框只会关闭它（就像我们通常使用覆盖菜单所做的那样）。
@SviatoslavZalishchuk 同意，你可以这样做一次，但我认为这部分问题'这个盒子上的“点击”功能应该打开一个画廊......但打开它后，它也应该隐藏..' 表明提问者缺少一些理解。但你是对的，它可以关闭它一次。
嗯，是的...我认为可以单击此 div 以打开画廊，一旦画廊“可见”，背景图像就会隐藏起来，我想这是不可能的还是需要很多技巧？

【解决方案4】：

请试试这个代码...

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

或

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

【讨论】：

如果你指的是被点击的对象，你应该使用$(this).hide();而不是$('#homebox').hide();。虽然通过 ID 查询确实很快，但无需再次执行此操作。如果选择器发生变化，如果你使用$(this)，你只需要在一个地方改变它。

【解决方案5】：

您应该尝试为您的图片库设置单独的控件。您不能使用元素本身来切换元素的可见性或显示。一旦它是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/

【讨论】：