0

我有一个小常见问题解答，人们可以在其中单击问题链接，并且使用 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);
        });
     });
});
4

2 回答 2

1

有了这个问题，我发现noscript标签可以在但head在 HTML5 中有效。而且，里面可以写样式！

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

<noscript>
<style>
    div.faqreponse {
        height: auto;
        overflow: visible;
    }
</style>
</noscript>
于 2013-02-15T22:53:59.727 回答
0

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

诚然，由于您必须等到加载内容，这对于 JavaScript 用户（这是大多数 Internet 用户）在视觉上可能并不令人满意。我会仔细权衡这个noscript建议。您是否希望您的大部分观众禁用 JS？

于 2013-02-15T20:28:41.180 回答