jquery制作faq页表列
时间: 2023-08-02 16:05:52 浏览: 50
以下是使用jQuery制作FAQ列表的示例代码:
HTML代码:
```
<div class="faq">
<h3 class="question">问题1?</h3>
<div class="answer">
<p>答案1。</p>
</div>
<h3 class="question">问题2?</h3>
<div class="answer">
<p>答案2。</p>
</div>
<h3 class="question">问题3?</h3>
<div class="answer">
<p>答案3。</p>
</div>
</div>
```
CSS代码:
```
.faq {
margin: 20px 0;
}
.question {
font-size: 16px;
font-weight: bold;
margin: 0;
padding: 10px;
cursor: pointer;
}
.answer {
display: none;
padding: 10px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
```
jQuery代码:
```
$(document).ready(function() {
$('.question').click(function() {
$(this).next('.answer').slideToggle();
});
});
```
以上代码实现了点击问题时显示和隐藏对应的答案。可以根据需要进行修改和调整。