javascript - 当您单击图像时，使文本出现(向上滑动)在图像下方

Question

我希望当您单击图像时，文本描述会显示(向上滑动)在图像下方，而当您在已经显示的情况下单击它时，文本描述会再次隐藏(向下滑动)。

JavaScript

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script type="text/javascript">
      $(document).ready(function () {
        $("#image img").click(function () {
            $("#image span").slideToggle();
        });
    });
</script>

CSS

#images {
    width: 275px;
    height: 200px;
}

#image div {
    display: block;
    width: 275px;
    height: 200px;
}

 #image img {
    display: block;
    width: 275px;
    height: 200px;
}

#image span {
    background: #000;
    color: #ccc;
    display: block;
    width: 265px;
    height: 40px;
    padding: 5px;
    display: none;
}

HTML

<div id="images">
    <div id="image">
        <div>                
            <img src="images/test-image.png" width="224px" height="224px" />
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>

        </div>
    </div>
</div>

这些是上面我尝试创建的代码的 HTML，当您单击 etchapps.com 网站上的任何图像时，可以演示这种效果的示例。我们如何使用 JavaScript 来实现此目的的任何想法或 jQuery。或者我们可以使用任何其他插件来完成此任务。

Answer 1

此效果的真正技巧是使包含包装器position:relative，然后使该位置内的包装器:绝对，并将顶部/右侧/底部设置为 0。这会将其锚定到容器的底部，无论标题可见时的高度。

然后您需要做的就是滑动切换标题元素的显示。在我的工作中，我们只是切换了一个类并使用 CSS 过渡来覆盖显示，但我已经调整了我们的方法以与您的代码保持一致。

这是一个codepen example

HTML

<div id="images">
    <div id="image">
        <div>                
            <img src="http://placekitten.com/275/200" />
            <div id="caption">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
    </div>
</div>

CSS

#images {
    width: 275px;
    height: 200px;
}

#image {
  position: relative;
  width: 275px;
  height: 200px;
  overflow: hidden;
}

#image > div {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;


}

 #image img {
    display: block;
    width: 275px;
    height: 200px;
}

#caption {
    background: #000;
    color: #ccc;
    display: none;
    overflow: hidden;
}

#caption p {
  padding: 5px;
  margin: 0;
}

JS

$(document).ready(function () {
    $("#image img").click(function () {
        $("#caption").slideToggle();
    });
});

我还建议从 div 切换到Figcaption 和 Caption 元素以获得更多语义标记，并可能切换类的 id。您可能需要更新 JS 以定位最近的标题，而不仅仅是任何标题。