Question

<!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？如何加载关闭页面？

感谢。

Answer 1

试试这个......

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

这将使页面加载时切换：

  $("h2").click();

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

  $("p").toggle();

See here for a working example

Answer 2

尝试：

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

Answer 3

试试这个

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

jquery切换如何使用没有个人ID的单个元素？

3 个答案: