如何在HTML创建可扩展的FAQ页面？

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

  •  18-09-2019
  •  | 
  •  

题

我想为我的网站，列出了所有的问题，作为超链接创建一个常见问题页面。当用户点击该链接，该问题的答案应该扩大了它的下方。

答案需要默认为隐藏，并且优选地点击链接切换答案可见性。

任何想法？

修改的

我试过几个的建议，但不幸的是，它看起来像谷歌网站不允许任何在HTML中的功能。我不能使用脚本，样式，嵌入，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 而且它有一个展开 - 收起mechanizm在/UI/Templates/Front/FAQsList.php可用的编缉 （ https://github.com/SolidMVC/ExpandableFAQ /blob/master/UI/Templates/Front/FAQsList.php ）

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top