Question

我说这真的是新手，但是我试图学习一些东西，而且我也被这个事实所困扰。

从技术上讲，当我点击它时，我无法隐藏这个“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') 
});

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

Answer 1

请尝试此代码......

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

或

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

Answer 2

请使用以下代码

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

Answer 3

尝试

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

Answer 4

添加hidden课程也是一种很好的做法。这样，在浏览DOM时，您可以轻松查看元素的状态：

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

然后在你的CSS中：

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

Answer 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/

点击它时隐藏一个盒子

5 个答案: