jquery faq

以下是一个基于jQuery toggle事件实现的FAQ列表页的示例代码：

HTML代码：

<div class="faq">
  <h3 class="faq-title">问题1</h3>
  <div class="faq-content">
    <p>问题1的答案</p>
  </div>
  <h3 class="faq-title">问题2</h3>
  <div class="faq-content">
    <p>问题2的答案</p>
  </div>
  <h3 class="faq-title">问题3</h3>
  <div class="faq-content">
    <p>问题3的答案</p>
  </div>
</div>

CSS代码：

.faq-content {
  display: none;
}

JavaScript代码：

$(document).ready(function() {
  $('.faq-title').click(function() {
    $(this).next('.faq-content').slideToggle();
  });
});

以上代码实现了一个FAQ列表页，点击问题标题可以展开或收缩对应的答案内容。

相关问题

jquery制作faq页表列

以下是使用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();
  });
});

以上代码实现了点击问题时显示和隐藏对应的答案。可以根据需要进行修改和调整。