的slideToggle;新的Web开发人员

Question

这里有新的网络开发者，所以请耐心等待......

我正在我们的网站上创建一个FAQ页面，其中包含10-15个问题，我想在点击问题后显示答案。

示例：

Q值。你叫什么名字？

（点击问题后，答案将向下滑动显示文字）

亚当

我希望您能够再次点击该问题，以便在观众阅读后隐藏答案。

感谢您的时间！

HTML：

<p>Q. WHO IS REQUIRED TO PARTICIPATE? </p> 
<p>Everyone must participate. </p> 

JS：

$(document).ready(function() { 
    $("p").click(function() { 
        $("p").slideToggle(200); 
    }); 
});

Answer 1

如果你把问题和相应的答案包含在一个单独的div中，那就更好了。

<强> HTML

    <div>
        <p class="question">Q. WHO IS REQUIRED TO PARTICIPATE?</p> 
        <p class="answer">Everyone must participate. </p>
    </div>
    <div>
        <p class="question">Q. MINIMUM AGE OF THE PARTICIPANT ?</p> 
        <p class="answer">26. </p>
    </div>

<强> JS

$('.question').on('click', function(){
    $(this).next('.answer').slideToggle(200);
});

<强> Check Fiddle

Answer 2

尝试使用此代码。

即使您是初学者，使用UL和LI这样的语义标签也是语义和良好的。为问题和答案提供H3和P非常有用，因为即使CSS不存在也能正常工作。

<强> HTML：

<ul class="faq">
    <li>
        <h3><a href="#">Question 1</a></h3>
        <p>Answer</p>
    </li>
    <li>
        <h3><a href="#">Question 2</a></h3>
        <p>Answer</p>
    </li>
</ul>

<强>的JavaScript

$('.faq > li > h3 > a').click(function(){
    $(this.parentNode).next().slideToggle(200);
    return false;
});

小提琴：http://jsfiddle.net/bhvZx/