代码之家 › 专栏 › 技术社区 › CodeFusionMobile

如何在html中创建可扩展的faq页面?

google-sites html

CodeFusionMobile · 技术社区 · 15 年前

我想为我的网站创建一个FAQ页面,将所有问题列为超链接。当点击链接时,这个问题的答案应该在它下面展开。

默认情况下,答案需要隐藏,最好单击链接以切换答案的可见性。

有什么想法吗?

编辑

我已经尝试了一些建议,但不幸的是,看起来google站点不允许在html中使用这些功能。我不能使用脚本,样式,嵌入,iframe,或者除了基本的文本格式之外的任何东西。每个人都有很好的想法,但看起来我不得不接受目录式的常见问题解答。

4 回复 | 直到 10 年前

Oxwivi rogeriopvl 13 年前

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

p2u 15 年前

这里有一个可能的方法:

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

user151323 15 年前

好吧,把答案写在 div 每个问题下面都有一个容器。

跳水运动员会有 display:hidden 默认情况下为属性。

点击链接后,这个css样式将被javascript删除。

类似这样的查询(需要测试输入错误等):

$(function()

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

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

Robusto 15 年前

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前