jquery - 滑动切换；新的网络开发人员在这里

Question

这里是新的网络开发人员，所以请多多包涵……

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

例子：

问：你叫什么名字？

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

亚当

我还希望您能够在查看者阅读后再次单击问题以隐藏答案。

感谢您的时间！

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);
});

检查小提琴 </p>

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/