Question

总体目标：点击一行图标，显示图片，链接等。

我现在正在使用Jquery做整个隐藏/显示事情。但是，当我一次测试一个时，图像会出现在图标下方。当我在线上一起测试它们时，图像位于图标的左侧，将其余图标推到另一条线。

如果有人点击图标（图像本身），我可以做什么，隐藏的图像会显示在整行图标的下方？

有四个图标，我将它们居中。

<center><p>
<a id="BioButton"><img src="http://static.tumblr.com/6s0fefr/Lt4na0jnr/bionew.png">    </a><img id="MyBio" style="display:none;"  src="http://static.tumblr.com/6s0fefr/ce9na0k4w/bioimage.png">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
      $('#BioButton').on("click", function(){
         $('#MyBio').toggle();
      });
   });
</script>
<a href="http://www.britrodriguez.com/music"><img     src="http://static.tumblr.com/6s0fefr/1QLn5uj1h/musicnew.png" style="width: 188px;     height: 188px;" /></a> 
<a href="http://www.britrodriguez.com/SHOWS"><img     src="http://static.tumblr.com/6s0fefr/vFQn5uj2h/tournew.png" style="width: 188px; height:     188px;" /></a>
<a href="http://www.britrodriguez.com/BOOK"><img     src="http://static.tumblr.com/6s0fefr/zOHn5uj3b/booknew.png" style="width: 188px; height:     188px;" /></a>
</center></p>

Answer 1

这是一个简单的解决方案。而不是将文本图像放在生物链接/图标内，为什么不把它放在自己的容器中？通过这种方式，文本将一直显示在所有内容之下。

JSFIDDLE

HTML：

<center>

    <div class="icon-container">
        <a href="http://www.britrodriguez.com/music">
            <img src="http://static.tumblr.com/6s0fefr/1QLn5uj1h/musicnew.png" style="width: 188px; height: 188px;" />
        </a>
        <a href="http://www.britrodriguez.com/SHOWS">
            <img src="http://static.tumblr.com/6s0fefr/vFQn5uj2h/tournew.png" style="width: 188px; height: 188px;" />
        </a>
        <a href="http://www.britrodriguez.com/BOOK">
            <img src="http://static.tumblr.com/6s0fefr/zOHn5uj3b/booknew.png" style="width: 188px; height: 188px;" />
        </a>
        <a id="BioButton">
            <img src="http://static.tumblr.com/6s0fefr/Lt4na0jnr/bionew.png" />
        </a>
    </div>
    <div class="display-container">
        <img id="MyBio" style="display:none;" src="http://static.tumblr.com/6s0fefr/ce9na0k4w/bioimage.png" />
    </div>

</center>

的CSS：

.icon-container{
    display:inline-block;
    margin-bottom: 25px;
}

Jquery的：

$(document).ready(function(){
      $('#BioButton').on("click", function(){
         $('#MyBio').toggle();
      });  
});

Answer 2

问题是你在第一张图片下面有div MyBio。将它移动到所有4个图标的末尾（在它之后或之前）。这应该可以解决你的问题。

在这组图标后移动此行..

<img id="MyBio" style="display:none;" src="http://static.tumblr.com/6s0fefr/ce9na0k4w/bioimage.png"/>

隐藏/显示Img在Img下

2 个答案: