jQuery slider 首先隐藏在 : fallback for people without JavaScript

Question

我有一个小的常见问题解答，人们可以点击问题链接，然后使用 jQuery slideToggle() 很好地显示答案。

默认情况下答案是隐藏的，您必须单击它们才能显示它们。 我不想在页面加载时有初始幻灯片。

问题是没有 JavaScript 的人无法显示答案。为了让这些人看到它们，它们应该是直接可见的。

如果我在加载页面时滑入答案是可能的，但我发现解决方案不够优雅。知道如何保留我的解决方案吗？

我在这里制作了一个 jsFiddle:http://jsfiddle.net/s5HNd/3/

我的代码:

HTML:

<div>
<ul class="faqquestions">
    <li>
        <span class="faqlink">First Question</span>
        <div class="faqreponse">First answer</div>
    </li>
    <li>
        <span class="faqlink">Second question</span>
        <div class="faqreponse">Second answer</div>
    </li>
</ul>
</div>

CSS:

ul.faqquestions li { cursor: pointer; }
div.faqreponse { overflow: hidden; }

JavaScript:

$(document).ready(function () {
    'use strict';
    $("ul.faqquestions li").each(function () {
        var tis = $(this), state = false, answer = 
            tis.children(".faqreponse").hide().css('height', 'auto').slideUp();

        $(this).children(".faqlink").click(function () {
            state = !state;
            answer.slideToggle(state);
        });
     });
});

Answer 1

与 this question我发现 noscript 标签可以放在 head 中，这在 HTML5 中是有效的。而且里面还可以写样式!

所以解决方案是在页面的 head 标签之间添加这段代码:

<noscript>
<style>
    div.faqreponse {
        height: auto;
        overflow: visible;
    }
</style>
</noscript>