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

Question

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

しかし、ページ上にある＆lt; li＆gt; 要素のうちの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>

  

クラス名が＆＃8220; msg_body＆＃8221;のすべての要素ページが読み込まれると折りたたまれます。

     

＆＃8220; slideToggle（）＆＃8221; jQueryの関数は、＆＃8220; div＆＃8221;の展開と折りたたみに使用されますクラス＆＃8220; msg_body＆＃8221;を使用します。

     

ユーザーがクラス＆＃8220; .msg_head＆＃8221;の要素をクリックすると、クラス＆＃8220; msg_body＆＃8221;のdivその横に、jQueryを使用してトグルパネルを作成し、スライド効果で切り替えます。

Answer 2

これも非常に簡単に確認してください デモ： http://demos.pankaj.pro/ jquery-tutorial-guide-to-build-a-simple-accordion /

コード http：// time2hack .com / 2013/01 / jquery-tutorial-guide-to-build-a-custom-and-simple-accordion.html