HTML에서 확장 가능한 FAQ 페이지를 만드는 방법은 무엇입니까?
-
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 )