مؤسسة انهيار قائمة
عندما تريد إخفاء جزء من الشاشة، يمكنك طي القائمة.
أمثلة
<الدرجة لي = "الأكورديون الملاحة ">
<A أ href = "#demo"> بسيط قابل للانهيار </ A>
<شعبة معرف = "عرض" الطبقة = "محتوى">
هذا البرنامج التعليمي - العلم ليس التكنولوجيا فحسب، بل أيضا حلما! ! !
</ div>
</ لى>
</ UL>
<! - مؤسسة تهيئة JS ->
<script>
$ (الوثيقة) .ready (وظيفة () {
$ (الوثيقة) .foundation ()؛
})
</ script>
محاولة »
أمثلة تحليلية
.accordion الطبقات و data-accordion يستخدم سمة لخلق عنصر للطي. .accordion-navigation من الدرجة المستخدمة في تقديم عناصر للطي. الفعلية محتوى .content فئة (<div الطبقة = "المحتوى" ) وانقر على زر لعرض إما.
أضفنا إلى عناصر القائمة <a> عنصر للسيطرة على (عرض / إخفاء) وللطي. ثم ترسيخ الارتباط مع المحتوى للطي مع نفس معرف المحتوى (<a href=#demo" 与<div id="demo"> المرتبطة بها).
ملاحظة: تأثير للطي يحتاج إلى تهيئة مؤسسة شبيبة.
افتراضيا، محتوى لطي مخفي. يمكننا في <div> السابقة .active يسمح الطبقة الافتراضي عرض:
تأثير الأكورديون
تأثير الأكورديون لتمديد وتحديد مضمون للطي.
تأثير الأكورديون باستخدام عدد وافر من المراسي المختلفة، ومعرف لإنشاء ارتباط:
أمثلة
<الدرجة لي = "الأكورديون الملاحة ">
<A أ href = "#demo"> الأكورديون المثال 1 </ أ>
<شعبة معرف = "عرض" الطبقة = "المحتوى النشط">
عرض 1 - تعليمي - العلم ليس التكنولوجيا فحسب، بل أيضا حلما! ! !
</ div>
</ لى>
<الدرجة لي = "الأكورديون الملاحة ">
<A أ href = "# demo2"> الأكورديون المثال 2 </ أ>
<شعبة معرف = "demo2" الطبقة = "محتوى">
عرض 2 - أبجد هوز دولور الجلوس امات ....
</ div>
</ لى>
<الدرجة لي = "الأكورديون الملاحة ">
<A أ href = "# demo3"> المثال الأكورديون 3 </ A>
<شعبة معرف = "demo3" الطبقة = "محتوى">
عرض 3 - تعليمي - العلم ليس التكنولوجيا فحسب، بل أيضا حلما! ! !
</ div>
</ لى>
</ UL>
محاولة »
افتراضيا، الأكورديون لديه عنصر القائمة المفتوحة. إذا كنت ترغب في إغلاق كافة يمكن استخدامها data-options="multi_expand:true;" ،" الخصائص:
أمثلة
..
</ UL>
محاولة »