HTMLで拡張可能なFAQページを作成する方法？

StackOverflow https://stackoverflow.com/questions/2403146

  •  18-09-2019
  •  | 
  •  

質問

私は、ハイパーリンクとしての質問のすべてを示しています私のウェブサイトのためのFAQページを作成したいと思います。リンクをクリックすると、その質問の答えはその下に出て展開する必要があります。

答えはデフォルトで非表示にする必要があり、好ましくは、リンクをクリックすると解答表示を切り替えます。

任意の考え？

の編集の

私は提案のいくつかを試してみたが、残念ながらそれはHTMLでその機能のいずれかを許可していませんGoogleサイトのように見えます。私はそれが表示されます書式設定、基本的なテキストの横に、スクリプト、スタイル、埋め込み、IFRAME、または何かを使用することはできません。素晴らしいアイデアの誰もが、それは私が目次スタイルのよくある質問の表のために解決する必要がありますように見えます。

役に立ちましたか？

解決

の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>

他のヒント

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

<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>

さて、質問の下に各divコンテナに答えを持っています。

のdiv要素は、デフォルトでdisplay:hidden属性を持つことになります。

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

クエリでこのような何か（タイプミスなどのテストを必要とします。）：

$(function()

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

    { $("div[name='Answer1']").removeClass("answer-hidden"); }); });

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';
}

あなたは「拡張よくある質問」のコードを勉強したいこと - それはGitHubの上で提供されています： https://github.com/SolidMVC/ExpandableFAQする そして、それは/UI/Templates/Front/FAQsList.phpで接続可その拡大-崩壊をmechanizmを持っています （ https://github.com/SolidMVC/ExpandableFAQ /blob/master/UI/Templates/Front/FAQsList.phpする）

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top