我想为我的网站创建一个FAQ页面,将所有问题列为超链接。点击链接后,该问题的答案应该在其下方展开。
默认情况下,答案需要隐藏,最好点击链接切换答案的可见性。
有什么想法吗?
修改的
我已经尝试了一些建议,但不幸的是,它看起来像谷歌网站不允许在HTML中的任何功能。我不能使用脚本,样式,嵌入,iframe或基本文本格式之外的任何内容。每个人都有很棒的想法,但看起来我不得不满足于目录式的常见问题解答。
答案 0 :(得分:8)
这是一种可行的方法:
<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>
答案 1 :(得分: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 :(得分:2)
好吧,请在问题下方的div
容器中找到答案。
默认情况下,div将具有display:hidden
属性。
单击链接后,将使用JavaScript删除此CSS样式。
使用Query这样的东西(需要测试拼写错误等):
$(function()
{ $("a[name='Question1']").click(function()
{ $("div[name='Answer1']").removeClass("answer-hidden"); }); });
答案 3 :(得分: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';
}
答案 4 :(得分:0)
您可能想研究“ Expandable FAQ”的代码-可以在GitHub上找到: https://github.com/SolidMVC/ExpandableFAQ 它具有在/UI/Templates/Front/FAQsList.php中可用的展开折叠机制 (https://github.com/SolidMVC/ExpandableFAQ/blob/master/UI/Templates/Front/FAQsList.php)