كيفية إنشاء صفحة أسئلة وأجوبة قابلة للتوسيع في HTML؟

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

  •  18-09-2019
  •  | 
  •  

سؤال

أرغب في إنشاء صفحة أسئلة وأجوبة لموقع الويب الخاص بي الذي يسرد جميع الأسئلة مثل الارتباطات التشعبية. عند النقر فوق الرابط، يجب أن يتجاوز الإجابة عن هذا السؤال تحتها.

يجب أن تكون الإجابات مخفية افتراضيا، ويفضل أن يؤدي النقر فوق الارتباط إلى تبديل رؤية الإجابات.

أي أفكار؟

يحرر

لقد جربت العديد من الاقتراحات، لكن لسوء الحظ، يبدو أن مواقع Google لا تسمح بأي من هذه الوظائف في HTML. لا يمكنني استخدام البرامج النصية أو الأساليب أو تضمينها أو iFrame أو أي شيء بجانب تنسيق النص الأساسي الذي سيظهره. أفكار رائعة للجميع، ولكن يبدو الأمر كما سيتعين علي الاستقرار على جدول الأسئلة الشائعة على طاولة من المحتويات.

هل كانت مفيدة؟

المحلول

مثال بسيط باستخدام 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>

لغة البرمجة

<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>

وفي تبديل جافا سكريبت بسيط:

function toggleContents(elm) {
  var contentContainer = elm.parentNode.getElementsByTagName("div")[1];
  contentContainer.style.display = (contentContainer.style.display == 'block') ? 'none' : 'block';
}

قد ترغب في دراسة رمز "الأسئلة الشائعة القابلة للتوسيع" - وهي متوفرة على Github:https://github.com/solidmvc/expandablefaq.وهذا هو أن توسيع طيادة emileizm Avialable في /ui/templates/front/faqslist.php ( )

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top