Как создать расширяемую страницу FAQ в HTML? - PullRequest
Новая
       15

Как создать расширяемую страницу FAQ в HTML?

7 голосов
/ 08 марта 2010

Я хотел бы создать страницу часто задаваемых вопросов для моего веб-сайта, которая перечисляет все вопросы в виде гиперссылок. Если щелкнуть ссылку, ответ на этот вопрос должен раскрыться под ней.

Ответы должны быть скрыты по умолчанию, и, желательно, щелкнув ссылку, вы переключите видимость ответов.

Есть мысли?

Редактировать

Я перепробовал несколько предложений, но, к сожалению, похоже, что сайты Google не поддерживают эту функцию в html. Я не могу использовать скрипты, стили, встраивание, iframe или что-либо кроме базового форматирования текста, которое появилось бы. Всем отличные идеи, но, похоже, мне придется согласиться с часто задаваемыми вопросами о стиле оглавления.

Ответы [ 4 ]

8 голосов
/ 08 марта 2010

Здесь возможен подход: 

<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 голосов
/ 08 марта 2010

Простой пример с использованием 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 голосов
/ 08 марта 2010

Ну, имейте ответы в div контейнере каждый под вопросом.

По умолчанию у div будет атрибут display:hidden.

После нажатия на ссылки этот стиль CSS будет удален с помощью JavaScript.

Примерно так с Query (требуется проверка на опечатки и т. Д.): 

$(function()

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

    { $("div[name='Answer1']").removeClass("answer-hidden"); }); });
0 голосов
/ 08 марта 2010

В 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';
}
...