如何制作下拉列表 [英] How Do I Make A Dropdown List

问题描述

我不认为下拉列表是正确的术语。我正在撰写常见问题解答页面，并希望获得常见问题解答列表，然后当您点击其中一个时，答案就会出现在问题的正下方。



示例 -



常见问题解答：

问题1

问题2

问题3



I don't think "Dropdown List" is the proper term. I'm working on an FAQ page, and would like to have the list of FAQs, then when you click on one, the answer appears directly below its question.

Example -

FAQ's:



Question 1
Question 2
Question 3



问题1


问题1答案

Question 1

Question 1 Answer

推荐答案



我给你一些提示。尝试并在你的解决方案中使用它。



在这样的div中提出你的问题和答案



Hi,
I am giving you some hint. try it and fit this in your solution.

Put you question and answers in div like this


<div id='div_FAQ_Question_1' class='FAQ_Question' onclick='fnShowHideFAQ(this)'>
    Question 1
</div>
<div id='div_FAQ_Answer_1' class='FAQ_Answer'>
    Anwser 1
</div>
<div id='div_FAQ_Question_2' class='FAQ_Question' onclick='fnShowHideFAQ(this)'>
    Question 2
</div>
<div id='div_FAQ_Answer_2' class='FAQ_Answer'>
    Anwser 2
</div>
<div id='div_FAQ_Question_3' class='FAQ_Question' onclick='fnShowHideFAQ(this)'>
    Question 3
</div>
<div id='div_FAQ_Answer_3' class='FAQ_Answer'>
    Anwser 3
</div>





使用CSS





Use CSS


.FAQ_Answer
{
    display: none;
}





最后定义js函数







Finally define js function



function fnShowHideFAQ(obj) {

    var currentQuestionId = obj.id;
    var currentAnswerId = currentQuestionId.replace('Question', 'Answer');
    var currentAnswerStatus =




（' ＃' + currentAnswerId）.css（' display'）;

('#' + currentAnswerId).css('display');




（' 。FAQ_Answer'）。css （' display'，' 无）;

if （currentAnswerDisplay == ' 无'）{

('.FAQ_Answer').css('display', 'none'); if (currentAnswerDisplay == 'none') {




这篇关于如何制作下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！