代码之家 › 专栏 › 技术社区 › Iain Fraser

在jquery的$(document.ready()之前隐藏元素的可访问方法?

accessibility usability css jquery javascript

Iain Fraser · 技术社区 · 15 年前

我有一个很大的调查,通过将jquery安排为多个部分,并使用手风琴菜单浏览每个部分,我使它更适用于jquery。

问题是,当 $(document).ready() 把所有的东西都放在手风琴菜单里。也就是说以前 $(文档).ready()) 你可以看到整个调查。

我确实考虑过设置 #surveyForm 到 display: none; 在CSS和 #surveyForm.active 到 display: block; 但这就产生了一个新问题:

未启用javascript的浏览器将无法看到surveyForm.active,因此无法使用调查。

有什么想法吗?

干杯

-伊恩

8 回复 | 直到 15 年前

Mitch Rosenburg 15 年前

这是渐进增强 solution 我在这种情况下使用。

Chris Heald 15 年前

它不像优秀的javascript那样干净、不引人注目,但是您可以在手风琴内容之后直接添加一个javascript片段来初始化手风琴并隐藏需要隐藏的部分。净效果应该完全消除“快照”,并使表单可供非JS客户机访问。

Denis 'Alpheus' Cahuk 15 年前

如果要轻松管理非javascript浏览器/用户,而不需要按扣启用JS后,请在页面的head节点中尝试以下代码段:

document.documentElement.className = 'has-js'
// or any other class name, use += and append it if you already have a class on your *html* tag

在您的CSS中,首先为非JS场景编写代码,然后将display设置为none,或者以任何其他适合您的方式隐藏它,方法是使用 .has-js .

我可能会被否决 把javascript放在头上 但请记住,从性能的角度来看(Yahoo等人),只有javascript 文件(外部) 需要尽快装载。

javascript标记本身不会使页面加载更长时间,除非它在解析和执行时会阻止呈现,但在这种情况下,我们希望这样做,因为您需要 有JS 在呈现前初始化以避免闪烁。

Mike 15 年前

我还没试过,不过也许你可以把内容包装起来 <noscript> 标签。禁用javascript的用户将始终看到内容。使用javascript的用户将看不到内容。然后使用jquery删除 <NoScript & GT; 标记,从而使那些使用javascript的用户可以看到内容。

编辑:

下面的例子几乎可以工作。我打算删除 <NoScript & GT; 标签,同时保留内容。但是,代码最终会转义HTML。这个想法是可行的,但我不确定如何正确地实现它,也许其他人可以对此有所了解:

<noscript>
    <p>Display me!</p>
</noscript>
<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        $('noscript').contents().unwrap();
    });
</script>

我想要的是:

<p>Display me!</p>

我得到的是:

&lt;p&gt;Display me!&lt;/p&gt;

编辑2:

经过一番调查, unwrap() 方法适用于非 <NoScript & GT; 标签:例如,它适用于 <div> . 我不知道这里有什么解决办法。这大概与浏览器的解释方式有关。 <NoScript & GT; .

jAndy 15 年前

我会坚持 css display:none 解决方案。修复 no javascript 问题您可能会考虑使用:

<script type="text/javascript">
   $(document).ready(function(){
      // fade in?
   });
</script>
<noscript>
   <div>foobar!</div>
</noscript>

Jason 15 年前

你能试着把所有的东西都藏在jquery块的顶部,然后在完成所有的压缩之后再显示出来吗?

$(document).ready
(
    function ()
    {
        $("#surveyForm").hide();
        ... MAGIC CONDENSING
        $("#surveyForm").show();
    }
);

这可能会降低你看到的“啪”声的影响。

Chris 15 年前

我能想到的解决方法是:

使用javascript加载进行初始隐藏的CSS文件。
将CSS放在noscript块中,在将其设置为false之后,该块将可见性设置为true。

我想这两种方法都应该有效,尽管我还没有机会对它们进行适当的测试。

Marko 15 年前

您可以放置一个内联javascript语句,该语句将在元素呈现后立即隐藏该元素。

基本上…

脚本内部 <head> 节已加载
HTML已呈现
$(document).ready() 火灾

为了解决这个问题,你可以简单地做这个

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("#survey").accordion();
  }
</head>
<body>
    <div id="survey">....</div>
    <script type="text/javascript">
      $("#survey").hide();
    </script>
</body>