0

jQueryを使用して、質問のリンクをクリックすると回答がうまく表示される小さなFAQがあります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ユーザー（そこにいるインターネットユーザーの大多数）にとって視覚的に満足のいくものではないかもしれません。noscript私はこれを提案と慎重に比較検討します。あなたの聴衆のかなりの部分がJSを無効にすることを期待していますか？

于 2013-02-15T20:28:41.180 に答える