javascript - 单击页面上的按钮，信息会下拉到按钮下方？

Question

我的网站上有一张图片，我希望人们能够点击它并在其下方显示信息？就像隐藏信息一样，当点击图像时它会出现，但当第二次点击图像时它会消失。

到目前为止，代码的唯一部分只是图像代码:

<img src="info.jpg">

谢谢大家!

詹姆斯

Answer 1

如果您使用的是 jQuery，您可以使用以下代码:

<img src="info.jpg" onclick="$('#info').toggle()" /><br />
<div id="info" style="display:none">Information about your picture </div>

使用常规的 javascript 你可以这样做:

<img src="info.jpg" onclick="info();" /><br />
<div id="info" style="display:none">Information about your picture </div>
<script type="text/javascript">
function info(){
var currently = document.getElementById('info').getAttribute('style');
    if (currently != 'display:none')
        document.getElementById('info').setAttribute('style', 'display:none');
    else
        document.getElementById('info').setAttribute('style', 'display:block');
};
</script>

当然，对于常规的 javascript，您必须确保它是您正在设置的唯一内联样式，或者对信息进行进一步的解析。此外，您可以使用显示 block 以外的其他东西。

我喜欢使用的另一个单独选项是工具提示。