Как создать расширяемую страницу часто задаваемых вопросов в HTML?
-
18-09-2019 - |
Вопрос
Я хотел бы создать страницу часто задаваемых вопросов для моего веб -сайта, на которой перечислены все вопросы как гиперссылки. Когда ссылка нажимается, ответ на этот вопрос должен расширяться под ним.
Ответы должны быть скрыты по умолчанию, и предпочтительно щелчок по ссылке переключает видимость ответов.
Какие-нибудь мысли?
Редактировать
Я попробовал несколько предложений, но, к сожалению, похоже, что сайты Google не позволяют ни одной из этих функций в HTML. Я не могу использовать сценарии, стили, встраивать, iframe или что -то, кроме основного форматирования текста, это появится. Отличные идеи все, но, похоже, мне придется согласиться на часто задаваемые вопросы по стилю содержимого.
Решение
Простой пример с использованием 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>
Другие советы
Здесь возможный подход:
<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>
Ну, есть ответы в div
контейнер каждый ниже вопроса.
Divs будет иметь display:hidden
атрибут по умолчанию.
Нажав на ссылки, этот стиль CSS будет удален с помощью JavaScript.
Что -то вроде этого с запросом (нужно тестирование на опечатки и т. Д.):
$(function()
{ $("a[name='Question1']").click(function()
{ $("div[name='Answer1']").removeClass("answer-hidden"); }); });
В 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';
}
Возможно, вы захотите изучить код "расширяемого FAQ" - он доступен на GitHub:https://github.com/solidmvc/expandablefaqИ у него есть механизация расширения Collapse Avialable at /ui/templates/front/faqslist.php ( https://github.com/solidmvc/expandablefaq/blob/master/ui/templates/front/faqslist.php )