jquery - カスタム アコーディオン - それぞれを使用

Question

投稿を表示するページ用のカスタム アコーディオンを作成しようとしています。私は HTML を使用してリスト形式で作成しており、各ヘッダーをクリックして展開して詳細情報を表示するときに効果を作成しようとしています。

<li>しかし、ページ上にある6 つの要素に対して 6 つのコード ブロックを言う必要はありません。

.each(); を介して実行する方法はありますか? 多分？各セクションを作成する代わりに？より動的なアプローチを試してください。

Answer 1

このチュートリアルをご覧になりましたか?

この例が示すように、これを達成するために複数の条件は必要ないからです。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
  //hide the all of the element with class msg_body
  $(".msg_body").hide();
  //toggle the componenet with class msg_body
  $(".msg_head").click(function()
  {
    $(this).next(".msg_body").slideToggle(600);
  });
});
</script>

クラス名が「msg_body」のすべての要素は、ページが読み込まれると折りたたまれます。

jQueryの「slideToggle()」関数を使用して、クラス「msg_body」で「div」の展開と折りたたみを行います。

ユーザーがクラス「.msg_head」の要素をクリックすると、その横にあるクラス「msg_body」の div がスライド効果でトグルされ、jQuery を使用してトグル パネルが作成されます。