صغيرة قابلة للطي المثلثات:كيف يمكنني إنشاء أقسام قابلة للطي على صفحة الويب ؟

Question

بعض صفحات الويب قد "تحول" مثلث التحكم التي يمكن أن انهيار القوائم الفرعية.أريد نفس النوع من السلوك ، ولكن من أجل الأقسام في شكل.

أقول قد شكل كان المقرض ، الاسم ، العنوان و المدينة المدخلات.بعض مستخدمي الموقع تسير في حاجة إلى مجموعة ثانية من هذه الحقول.أود أن إخفاء حقول إضافية بالنسبة لغالبية المستخدمين.تلك التي تحتاج إلى حقول إضافية يجب أن تكون قادرة على الوصول إليها بنقرة واحدة.كيف لي أن أفعل ذلك ؟

Answer 1

أعتقد أنك تعني أنك تريد أن للطي الأبواب على النموذج الخاص بك.

باختصار:

1. وضع المحتوى الذي تريد انهيار في شعبة ، مع خاصية CSS من "display:none" في البداية
2. لف الرابط (علامة) حول مثلث صورة (أو نص مثل "إخفاء/إظهار") التي تدير جافا سكريبت لتبديل عرض المنشأة.
3. إذا كنت تريد المثلث إلى "تشغيل" عند القسم الموسع/أظهرت, هل يمكن أن يكون جافا سكريبت مبادلة خارج الصورة في نفس الوقت.

وهنا شرح أفضل: كيفية إنشاء للطي DIV مع جافا سكريبت و CSS [تحديث 2013-01-27 هذه المادة لم تعد متوفرة على شبكة الإنترنت ، يمكنك الرجوع إلى مصدر هذه صفحة HTML من أجل تطبيق المثال مستوحاة من هذه المادة]

أو إذا كنت البحث جوجل مع كلمات مثل "CSS انهيار أقسام" أو من هذا القبيل سوف تجد العديد من الدروس الأخرى ، بما في ذلك سوبر يتوهم منها (على سبيل المثال http://xtractpro.com/articles/Animated-Collapsible-Panel.aspx).

Answer 2

تتميز الطريقة الأساسية المطلقة باخفاء / إظهار عنصر باستخدام JavaScript عن طريق تعيين خاصية الرؤية لعنصر.

بالنظر إلى مثالك تخيل أن لديك النموذج التالي المحدد في صفحتك:

<form id="form1">
    <fieldset id="lenderInfo">
        <legend>Primary Lender</legend>
        <label for="lenderName">Name</label>
        <input id="lenderName" type="text" />
        <br />
        <label for="lenderAddress">Address</label>
        <input id="lenderAddress" type="text" />
    </fieldset>
    <a href="#" onclick="showElement('secondaryLenderInfo');">Add Lender</a>
    <fieldset id="secondaryLenderInfo" style="visibility:hidden;">
        <legend>Secondary Lender</legend>
        <label for="secondaryLenderName">Name</label>
        <input id="secondaryLenderName" type="text" />
        <br />
        <label for="secondaryLenderAddress">Address</label>
        <input id="secondaryLenderAddress" type="text" />
    </fieldset>
</form>

هناك شيئان يجب ملاحظته هنا:

1. يتم إخفاء المجموعة الثانية من حقول الإدخال في البداية باستخدام CSS مضطرب قليلا.
2. يربط رابط "إضافة المقرض" طريقة JavaScript التي ستقوم بكل عمل لك. عند النقر فوق هذا الارتباط، ستقوم بتعيين نمط الرؤية في هذا العنصر مما يؤدي إلى إظهاره على الشاشة.

showElement() يأخذ معرف العنصر كمعلمة وتبدو أن هذا:

function showElement(strElem) {
    var oElem = document.getElementById(strElem);

    oElem.style.visibility = "visible";

    return false;
}

سيقوم كل نهج JavaScript تقريبا بهذا تحت غطاء محرك السيارة، لكنني أود أن أوصي باستخدام إطار يخفي تفاصيل التنفيذ بعيدا عنك. إلقاء نظرة على jQuery., ، و jquery ui. من أجل الحصول على انتقال أكثر مصقولة عند إخفاء / عرض عناصرك.

Answer 3

إليك حل CSS بسيط فقط يستخدم خانة اختيار:

.hideNext:not(:checked)+div {
  max-height: 0;
  overflow: hidden;
}

<label for="ch1">More Options</label><input id="ch1" type="checkbox" class="hideNext" />
<div>Whatever you want to hide.</div>
and then more stuff below..