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>

Answer 2

默认情况下您可以看到答案，并且在页面加载时（或者甚至在加载每个答案元素时）您可以通过JavaScript隐藏答案（您可能必须使用.slideToggle(0)，它应立即将其关闭）。这样那些使用JavaScript的人仍然可以打开/关闭答案，但是由于没有首先关闭，他们将为非JS用户显示。

不可否认，由于你必须等到加载东西，这对JavaScript用户来说可能并不乐观（这是大多数互联网用户）。我会仔细考虑noscript的建议。您是否希望很大一部分观众禁用JS？

首先隐藏的jQuery滑块：没有JavaScript的人的后备

2 个答案: