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

私がやろうとしているのは、私の個人サイトの FAQ ページです。約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 に答える