如何在 HTML 中创建可扩展的常见问题解答页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2403146/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create expandable FAQ page in HTML?
提问by CodeFusionMobile
I'd like to create an FAQ page for my website that lists all of the questions as hyperlinks. When the link is clicked, the answer for that question should expand out beneath it.
我想为我的网站创建一个常见问题页面，将所有问题列为超链接。单击链接时，该问题的答案应在其下方展开。
The answers need to be hidden by default, and preferably clicking the link toggles the answers' visibility.
默认情况下需要隐藏答案，最好单击链接切换答案的可见性。
Any thoughts?
有什么想法吗？
Edit
编辑
I've tried several of the suggestions, but unfortunately it looks like google sites doesn't allow any of that functionality in the html. I can't use scripts, styles, embed, iframe, or anything beside basic text formatting it would appear. Great ideas everyone, but it looks like I'll have to settle for a Table of Contents style FAQ.
我已经尝试了几个建议，但不幸的是，谷歌网站似乎不允许在 html 中使用任何该功能。我不能使用脚本、样式、嵌入、iframe 或除了它会出现的基本文本格式之外的任何东西。每个人都有好主意，但看起来我必须满足于目录样式的常见问题解答。
采纳答案by rogeriopvl
Simple example using jQuery:
使用 jQuery 的简单示例：
JavaScript/jQuery
JavaScript/jQuery
<script type="text/javascript">
$(document).ready(function(){
$('.faqlink').click(function(){
$('.content').hide();
$(this).next('.content').show();
});
});
</script>
CSS
CSS
<style type="text/css">
.content {
display: hidden;
}
</style>
HTML
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>
回答by p2u
Here a possible approach:
这是一种可能的方法：
<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>
回答by rogeriopvl
Well, have the answers in a divcontainer each below the question.
好吧，将答案放在div每个问题下方的容器中。
The divs will have display:hiddenattribute by default.
display:hidden默认情况下，div 将具有属性。
Upon clicking on the links, this CSS style will be removed with JavaScript.
单击链接后，此 CSS 样式将被 JavaScript 删除。
Something like this with Query (needs testing for typos etc.):
像这样的查询（需要测试拼写错误等）：
$(function()
{ $("a[name='Question1']").click(function()
{ $("div[name='Answer1']").removeClass("answer-hidden"); }); });
回答by Robusto
In the HTML you use this pattern:
在 HTML 中，您使用此模式：
<div style="parentContainer">
<div style="titleContainer" onclick="toggleContents(this)">Link to click on</div>
<div style="contentContainer">Some content here.</div>
</div>
and in the Javascript toggling is simple:
在 Javascript 中切换很简单：
function toggleContents(elm) {
var contentContainer = elm.parentNode.getElementsByTagName("div")[1];
contentContainer.style.display = (contentContainer.style.display == 'block') ? 'none' : 'block';
}
回答by KestutisIT
You may want to study the code of "Expandable FAQ" - it is available on GitHub: https://github.com/SolidMVC/ExpandableFAQAnd it's has that expand-collapse mechanizm avialable at /UI/Templates/Front/FAQsList.php ( https://github.com/SolidMVC/ExpandableFAQ/blob/master/UI/Templates/Front/FAQsList.php)
您可能想研究“可扩展常见问题解答”的代码 - 它可以在 GitHub 上找到：https: //github.com/SolidMVC/ExpandableFAQ并且它在 /UI/Templates/Front/FAQsList.php 上有扩展折叠机制( https://github.com/SolidMVC/ExpandableFAQ/blob/master/UI/Templates/Front/FAQsList.php)
