javascript - 如何使用 z-index 使链接单击显示 div 内容？

Question

如何制作 anchor 链接，单击应显示 div 的内容，但不会将链接下方的内容向下推。当您单击该 div 的外侧时，应关闭该 div。

Javascript 或 jquery 都可以。这是我到目前为止所得到的:

<a onclick="toggleDiv()"></a>
<div id="translate" style="display:none;">This is the content should be shown but don't push the content down.</div>

这是脚本

function toggleDiv()
    {
        var googleDiv = document.getElementById('translate');
        if(googleDiv.style.display == 'block')
            googleDiv.style.display = 'none';
        else
          googleDiv.style.display = 'block';
    }

Answer 1

尝试使用可见性而不是显示。

style="visibility:hidden;"

if(googleDiv.style.visibility == 'visible')
  googleDiv.style.visibility = 'hidden';
else
  googleDiv.style.visibility = 'visible';