HTML에서 확장 가능한 FAQ 페이지를 만드는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/2403146

  •  18-09-2019
  •  | 
  •  

문제

모든 질문을 하이퍼 링크로 나열하는 웹 사이트의 FAQ 페이지를 만들고 싶습니다. 링크를 클릭하면 해당 질문에 대한 답이 그 아래에서 확장되어야합니다.

답은 기본적으로 숨겨져야하며 링크를 클릭하면 답변의 가시성을 전환합니다.

이견있는 사람?

편집하다

몇 가지 제안을 시도했지만 불행히도 Google 사이트에서 HTML에서 해당 기능을 허용하지 않는 것처럼 보입니다. 나는 스크립트, 스타일, embed, iframe 또는 기본 텍스트 형식 외에 어떤 것이 나타나는지 사용할 수 없습니다. 모든 사람이라면 모두이지만 목차 스타일 FAQ에 정착해야 할 것 같습니다.

도움이 되었습니까?

해결책

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>

글쎄, a 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그리고 그것은 /ui/templates/front/faqslist.php에서 확장 된 collapse mechanizm avialable을 가지고 있습니다. https://github.com/solidmvc/expandablefaq/blob/master/ui/templates/front/faqslist.php )

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top