如何使用z-index鏈接點擊顯示div的內容？

如何使錨點鏈接點擊應該顯示一個div的內容，但不會推動鏈接下方的內容。並且當您點擊該div的一側時應該關閉div。如何使用z-index鏈接點擊顯示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'; 
    }

來源

2012-03-21 Tiger

我不認爲這與z-index有什麼關係。 – Jivings 2012-03-21 22:32:39

那麼如何讓內容不會被推下來 – Tiger 2012-03-21 22:48:31

目前還不清楚你想要什麼。 – Jivings 2012-03-21 22:58:29

嘗試使用的visibility代替display。

style="visibility:hidden;"

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

來源

2012-03-21 22:29:02 Jivings

您需要更改您的else塊以使用'googleDiv.style.visibility' – 2012-03-21 22:32:25

糟糕，謝謝@SKS。 – Jivings 2012-03-21 22:33:25

但是當你點擊div的外部而不是鏈接時，你如何隱藏div？ – Tiger 2012-03-21 22:47:14

您標記query。如果您使用它：

<a onclick="$('#translate').toggle()"></a>

來源

2012-03-21 22:33:07 safarov

toggle（）會將鏈接下的內容向下推送？ – Tiger 2012-03-21 22:47:50

是的，請檢查http://jsfiddle.net/37Ng2/ – safarov 2012-03-21 22:54:18

如何使用z-index鏈接點擊顯示div的內容？

回答

相關問題