漸進增強和「隱藏內容的閃光」？

我想建立一個逐漸增強的頁面，適用於JS和非JS用戶。我想最初爲JS用戶隱藏一些表單控件，但始終向非JS用戶顯示它們。漸進增強和「隱藏內容的閃光」？

我的問題是關於如何做到這一點，而不會爲JS用戶創建令人分心的「可見的，然後即刻隱藏的」內容閃光。

例如，在JS版本中，我想摺疊部分搜索表單，而是顯示'點擊此處查看額外選項'按鈕。我這樣做如下：

$(document).ready(function() { 
    $("#extra-options").hide(); 
    ... 
    $("#show-extra-options").click(function() { 
    $("#extra-options").slideToggle(); 
    }); 
});

這工作，但它意味着JS用戶，在頁面加載時，額外的選項是500毫秒左右可見的，那麼他們消失。這很分散注意力。

是否有任何明智的方法來解決這個問題？

StackOverflow has just suggested this answer：這是合理的嗎？對不起，如果這現在是一個重複的問題，但我認爲它仍然值得用我自己的語言寫這個問題，因爲我在搜索過程中沒有找到答案。

來源

2013-02-07 Richard

在你的腳本標籤在頭部添加此：

$('html').addClass('js');

然後，你可以用它來顯示和隱藏要素：

.hasJs { display: none; } 
.js .hasJs { display: block; } 
.js .noJs { display: none; }

您可以隱藏使用或不使用Javascript無論是用戶的內容：

<div class="hasJs">Some content only visible for JS users.</div> 
<div class="noJs">Some content only visible for non-JS users.</div>

由於類和CSS在頭部，元素已經是s當身體被分析時，它們在存在時會被勒令。

演示：http://jsfiddle.net/Guffa/YuAyr/

這是一個類似的方法來一個第一回答您鏈接到的問題，但這是有點清潔，因爲你沒有一個類添加到html元素在標記中，代碼只是添加類而不是刪除它。

來源

2013-02-07 09:25:39 Guffa

漸進增強和「隱藏內容的閃光」？

回答

相關問題