8

私の Web サイトに、すべての質問をハイパーリンクとして一覧表示する FAQ ページを作成したいと考えています。リンクをクリックすると、その質問に対する回答がその下に展開されます。

回答はデフォルトで非表示にする必要があり、できればリンクをクリックして回答の表示を切り替えます。

何かご意見は？

編集

いくつかの提案を試してみましたが、残念ながら、Google サイトでは html でその機能が許可されていないようです。スクリプト、スタイル、埋め込み、iframe、または表示される基本的なテキスト形式以外のものは使用できません。皆さん素晴らしいアイデアですが、目次スタイルの FAQ に落ち着かなければならないようです。

4

5 に答える 5

9

ここで可能なアプローチ：

<html><body><script>

function toggleElement(id)
{
    if(document.getElementById(id).style.display == 'none')
    {
        document.getElementById(id).style.display = '';
    }
    else
    {
        document.getElementById(id).style.display = 'none';
    }
}
</script>
<p>
<a href="javascript:toggleElement('a1')">Is this a question?</a>
</p>
<div id="a1" style="display:none">
This is an answer.
</div>
</body>
</html>
于 2010-03-08T17:21:15.850 に答える
6

jQuery を使用した簡単な例:

JavaScript/jQuery

<script type="text/javascript">
$(document).ready(function(){
    $('.faqlink').click(function(){
        $('.content').hide();
        $(this).next('.content').show();
    });
});
</script>

CSS

<style type="text/css">
.content {
    display: hidden;
}
</style>

HTML

<h2>My FAQ</h2>
<a class="faqlink" href="#">Link 1</a>
<div class="content">lorem ipsum</div>
<a class="faqlink" href="#">Link 2</a>
<div class="content">lorem ipsum</div>
<a class="faqlink" href="#">Link 3</a>
<div class="content">lorem ipsum</div>
于 2010-03-08T17:23:08.943 に答える
2

さて、div質問の下のそれぞれのコンテナに答えを入れてください.

div にはdisplay:hiddenデフォルトで属性があります。

リンクをクリックすると、この CSS スタイルは JavaScript で削除されます。

クエリを使用すると、次のようになります (タイプミスなどのテストが必要です)。

$(function()

  { $("a[name='Question1']").click(function()

    { $("div[name='Answer1']").removeClass("answer-hidden"); }); });
于 2010-03-08T17:16:30.397 に答える
0

HTML では、次のパターンを使用します。

<div style="parentContainer">
  <div style="titleContainer" onclick="toggleContents(this)">Link to click on</div>
  <div style="contentContainer">Some content here.</div>
</div>

そしてJavascriptのトグルは簡単です：

function toggleContents(elm) {
  var contentContainer = elm.parentNode.getElementsByTagName("div")[1];
  contentContainer.style.display = (contentContainer.style.display == 'block') ? 'none' : 'block';
}
于 2010-03-08T17:30:03.167 に答える