0 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>FAQ Section</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
  $("h2").click(function(){
    $("p").toggle("fast");
  });
}); </script>

</head>

<body>
    <h1>FAQ</h1>

  <div> 
    <!-- The FAQs are inserted here -->

      <h2>Question1?</h2>
      <p>Answer...</p>
      <h2>Question2?</h2>
      <p>Answer...</p>
      <h2>Question3?</h2>
      <p>Answer...</p>
  </div>

</body>

</html>

这是我的示例页面：http ://www.kursatkarabulut.com/kopya.html

我想要做的是我个人网站的常见问题解答页面。将有大约 40 个问题。我是 jQuery 的新手。我对每个问题都使用了切换。只有问题会在开始时显示，当用户点击一个问题时，它会显示在下方，再次点击它会隐藏。现在，当我单击一个问题时，它会扩展和收缩所有问题。

有没有办法在不为每个标题使用单独的 id 的情况下单独执行此操作？以及如何在关闭的情况下加载页面？

谢谢。

4

3 回答 3

2

试试这个...

  $("h2").click(function(){
    $(this).next().toggle("fast");
  });

这将使页面加载切换：

  $("h2").click();

或者，如果您不想在页面加载时切换动画，您可以这样做：

  $("p").toggle();

有关工作示例，请参见此处

于 2012-06-14T19:09:11.970 回答
1

尝试：

$("h2").click(function(){
    $(this).next().toggle("fast");
});
于 2012-06-14T19:09:20.323 回答
0

试试这个

$(document).ready(function(){
  $("h2").click(function(){
    $(this).next("p").toggle("fast");
  });
});
于 2012-06-14T19:11:17.930 回答