当前位置：文江博客话题详情

如何用 HTML 创建可扩展的常见问题解答页面？

发布于 2024-08-24 03:18:10 字数 262 浏览 14 评论 0原文

我想为我的网站创建一个常见问题解答页面，以超链接形式列出所有问题。单击链接后，该问题的答案应在其下方展开。

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

有什么想法吗？

编辑

我已经尝试了一些建议，但不幸的是，Google 网站似乎不允许在 html 中使用任何该功能。我无法使用脚本、样式、嵌入、iframe 或除显示的基本文本格式之外的任何内容。大家的想法都很好，但看起来我不得不满足于目录风格的常见问题解答。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

゛清羽墨安 2024-08-31 03:18:10

这是一种可能的方法：

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

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>

回复收藏 0 原文

荆棘i 2024-08-31 03:18:10

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

Simple example using 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>

回复收藏 0 原文

哆兒滾 2024-08-31 03:18:10

好吧，将答案放在问题下方的 div 容器中。

默认情况下，div 将具有 display:hidden 属性。

单击链接后，此 CSS 样式将通过 JavaScript 删除。

类似这样的查询（需要测试拼写错误等）：

$(function()

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

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

Well, have the answers in a div container each below the question.

The divs will have display:hidden attribute by default.

Upon clicking on the links, this CSS style will be removed with JavaScript.

Something like this with Query (needs testing for typos etc.):

$(function()

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

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

回复收藏 0 原文

顾冷 2024-08-31 03:18:10

您可能想研究“可扩展常见问题解答”的代码 - 它可以在 GitHub 上找到：
https://github.com/SolidMVC/ExpandableFAQ
它具有可在 /UI/Templates/Front/FAQsList.php 获取的展开/折叠机制
( https://github.com/SolidMVC/ExpandableFAQ /blob/master/UI/Templates/Front/FAQsList.php ）

回复收藏 0 原文

盛夏已如深秋| 2024-08-31 03:18:10

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

In the HTML you use this pattern:

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

function toggleContents(elm) {
  var contentContainer = elm.parentNode.getElementsByTagName("div")[1];
  contentContainer.style.display = (contentContainer.style.display == 'block') ? 'none' : 'block';
}

回复收藏 0 原文

~没有更多了~