Question

我正在尝试创建一个交互式常见问题解答部分，其中答案最初是隐藏的，但可以通过单击问题来打开和关闭。但是，我得到了一种奇怪的行为，其中一切都在淡出页面。请帮我。代码如下：

（当您发布答案时，请告诉我为什么我的代码不起作用。）

<html>
<head>
<script src="jquery-1.11.0.min.js"></script>
</head>

<body>

<h1>Frequently asked questions</h1>

<br/><br/>

<div id="qna">

<h3># Question</h3>
<p> This is the answer.</p>


</div>

</body>

<script>
$('document').ready(function(){
  $('#qna p').hide();
  $('#qna h3').toggle(
    function(){
      $(this).next('p').fadeIn();
    },
    function(){
      $(this).next('p').fadeOut();
    }
  ); //toggle
}); //ready
</script>

</html>

Answer 1

您可以使用fadeToggle()：

$('#qna h3').click(function() {
    $(this).next('p').fadeToggle();
})

<强> Fiddle Demo

Answer 2

以下是您的代码的重组，您可以使用fadeToggle()代替替代fade-in和fade-out

<script>
$('document').ready(function(){
  $('#qna p').hide();
  $('#qna h3').click(function(){
      $(this).next('p').fadeToggle();

  ); //toggle
}); //ready
</script>

Answer 3

Jsfiddle
的 HTML

<h1>Frequently asked questions</h1> <div id="qna1" class="que"> <h3>Question 1</h3> <p> This is the answer 1.</p> </div> <div id="qna2" class="que"> <h3>Question 2</h3> <p> This is the answer 2.</p> </div> <div id="qna3" class="que"> <h3>Question 3</h3> <p> This is the answer 3.</p> </div>

<强>的jQuery

$('document').ready(function(){ $('p').hide(); $('.que h3').click(function(){ $(this).next('p').toggle('slolw'); }); });

互动FAQ错误

3 个答案: