隱藏div秒顯示（slideToggle/javascript）

Question

我有一個腳本，默認情況下隱藏div和slideToggles它當我單擊鏈接（請參閱http://zarin.me-聯繫鏈接）。這裏是我使用的代碼：

<script> 
$(document).ready(function(){ 
    $("#contact-drawer").hide(); 
    $(".toggle-drawer").show(); 

    $('.toggle-drawer').click(function(){ 
    $("#contact-drawer").slideToggle(); 
}); 
}); 
</script> 

我的問題是，當頁面加載時，整個div顯示一秒鐘，然後隱藏。有時候這可能有點刺耳。我需要修正什麼，以便div不會在加載時顯示？

Answer 1

由於Darko Z如下所述，導致閃爍的原因是瀏覽器渲染元素#contact-drawer和您的JavaScript代碼正在運行之間存在延遲。瀏覽器正在按照您的CSS和HTML告知它並顯示該元素，並在之後僅顯示，這表示文檔已完成解析（DOM就緒）並觸發JavaScript。

有幾種方法可以解決這個問題（具有不同的兼容性）。本質上，您需要在元素呈現和DOM準備就緒之間或之前獲取代碼。

要使用JavaScript修補，您可以在元素後立即添加內聯腳本以將其顯示設置爲隱藏。此代碼將在解釋頁面時立即執行，而不是在DOM準備就緒時執行。我相信這是在可訪問性方面最簡單和最安全的方法。

普通的JavaScript：

<section id="contact-drawer"></section> 
<script>document.getElementById('contact-drawer').style.display = 'none';</script> 

或使用jQuery：

<section id="contact-drawer"></section> 
<script>$("#contact-drawer").hide();</script> 

---

爲純CSS解決您將設置該元素的顯示屬性設置爲 '無'。請注意，通過此解決方案，如果禁用JavaScript，則表單將無法訪問。

CSS

#contact-drawer { 
    display:none; 
} 

---

要使用CSS固定和當禁止javascript，你可以使用一個額外的:target CSS選擇器，改變你的鏈接和JavaScript一點點維持正常運作的網頁。目標選擇器是not 100% compatible with older browsers，但它比上面的純CSS版本更易於訪問。

CSS

添加相同的樣式如上述，和複印設定顯示與選擇:target到框。這使得當你導航到http://zarin.me/#contact-drawer時，：target風格將被激活並且＃contact-drawer將被顯示。

#contact-drawer { 
    display:none; 
} 
#contact-drawer:target { 
    display:block; 
} 

HTML

變化從#到#contact-drawer錨HREF這樣，當鏈接點擊，它激活:target選擇。

<h3 class="contact"> 
    <a href="#contact-drawer" class="toggle-drawer" style=""> 
     <img src="img/envelope.png"> 
     CONTACT 
    </a> 
</h3> 

的JavaScript

在函數的末尾添加return false停止瀏覽器導航到#contact-drawer（和激活:target選擇器）被點擊時.toggle-drawer。

$('.toggle-drawer').click(function(){ 
    $("#contact-drawer").slideToggle(); 
    return false; 
}); 

Answer 2

你隱藏你的文檔加載div，這就是爲什麼你在慢速瀏覽器或較慢的機器上看到它的原因。

這樣做的一個更好的方法是在CSS中隱藏div，這意味着div在文檔顯示之前隱藏。

#contact-drawer { display: none; } 

但如果你真的需要用JavaScript來隱藏它，你可以包含下方您的div立即執行未在文件準備的腳本，這會給你同樣的效果。

<div id="contact-drawer" .... /> 
<script .... > 
    $("#contact-drawer").hide(); 
</script> 

Answer 3

您可以添加顯示沒有在你的CSS，等等載荷的方式，它已經隱藏，然後jQuery的應該處理的表演。

對於實施例

<style> 
#contact-drawer { 
display:none; 
} 
</style> 
<script> 
$(document).ready(function(){ 
    $(".toggle-drawer").show(); 

    $('.toggle-drawer').click(function(){ 
     $("#contact-drawer").slideToggle(); 
    }); 
}); 
</script> 

只是一個建議。