الأكورديون المخصص - باستخدام كل

Question

أحاول إنشاء أكورديون مخصص لصفحتي لتلك عرض مشاركاتي. لدي بتنسيق قائمة باستخدام HTML وأحاول إنشاء تأثير عند النقر فوق كل رأس للتوسع لإظهار المزيد من المعلومات.

لكني لا أريد أن أقول ست كتل من الكود لستة من <li> عناصر لدي على الصفحة.

هل هناك طريقة لتشغيله من خلال .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" عند تحميل الصفحة.

يتم استخدام وظيفة "slidetoggle ()" من jQuery لتوسيع وانهيار "div" مع فئة "msg_body".

عندما ينقر المستخدم على العنصر باستخدام الفئة ".msg_head" ، فإن Div مع فئة "msg_body" بجانبها ، يتم تبديلها مع التأثير المنزلق ، مما يجعل لوحة التبديل باستخدام 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