logo标签列表

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

htmlgoogle-sites
8
我想在我的网站上创建一个FAQ页面，列出所有问题的超链接。当点击链接时，该问题的答案应该展开在其下方。
默认情况下需要隐藏答案，最好是点击链接可以切换答案的可见性。
您有什么想法吗？
编辑
我尝试了几个建议，但不幸的是，看起来Google Sites不允许在HTML中使用任何这些功能。 我似乎不能使用脚本、样式、嵌入、iframe或任何除基本文本格式之外的东西。 大家提出了很棒的想法，但看起来我只能满足于类似目录式的FAQ。
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>
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>
2
你其实不需要 hide() 部分。你可以这样做：$(this).next('.content').toggle(); 并且链接可以从隐藏和显示切换，显示应该是 'none' 而不是 'hidden'。 - Chris
如果需要从外部页面链接到这些链接中的一个，该怎么办？ - baron5
“href='#'”是无用的，在我的Phonegap应用程序中给我带来了一些问题。没有它，行为是正确的。 - Piero Alberto
2

好的，将答案放在每个问题下面的

容器中。

这些

默认情况下会带有display:hidden属性。

点击链接后，JavaScript将移除此CSS样式。

使用Query可以实现类似以下代码（需要测试是否有错别字等）：

$(function()

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

    { $("div[name='Answer1']").removeClass("answer-hidden"); }); });
很遗憾，谷歌网站似乎不支持样式。 - CodeFusionMobile
1
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';
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接