के तपाईलाई थाहा छ कि त्यहाँ एक नेटिभ HTML5 समाधान छ धेरै सजिलै संग सामग्री लुकाउन र प्रकट गर्न को लागी एक accordion पढ्न थप/कम बटन सिर्जना गर्न कुनै जाभास्क्रिप्ट वा CSS छैन। कसरी पत्ता लगाउन पढ्नुहोस्।
यो र HTML5 ट्यागहरू आधिकारिक रूपमा ए खुलासा विजेट तत्व, तर संग जोडी HTML5 ट्यागहरूले तपाईंलाई एक दिनेछ शुद्ध HTML-मात्र एकॉर्डियन.
अर्थ JS वा CSS छैन चाहिएको छ। यो कस्तो राम्रो छ!
यहाँ एउटा साधारण तत्व देखाउने एउटा उदाहरण हो र .
यहाँ कोड छ:
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>र यहाँ यो कस्तो देखिनेछ:
थप पढ्नुहोस्
यो सामग्री लुकाउन र प्रकट गर्न एक नेटिभ HTML5 accordion हो। धेरै राम्रो, सही?
यस्ले कसरी काम गर्छ? यो ट्याग खोल्न वा बन्द गर्न सकिने तत्वको लागि र्यापरको रूपमा कार्य गर्दछ। प्रयोगकर्ताले त्यो लेबलमा क्लिक गर्नुपर्छ तत्व खोल्न वा बन्द गर्न ट्याग गर्नुहोस्।
स्टाइल र व्यवहारको बारेमा के हो?
शैलीहरू
तपाईंले प्रकट पाठ बाकसको उपस्थिति अनुकूलन गर्न CSS स्टाइल लागू गर्न सक्नुहुन्छ। तल ट्याब गरिएको इन्टरफेस शैली दिन्छ:
details {
font: 16px "Open Sans", Calibri, sans-serif;
width: 620px;
}
details > summary {
padding: 2px 6px;
width: 15em;
background-color: #ddd;
border: none;
box-shadow: 3px 3px 4px black;
cursor: pointer;
}
details > p {
border-radius: 0 0 10px 10px;
background-color: #ddd;
padding: 2px 6px;
margin: 0;
box-shadow: 3px 3px 4px black;
}
details[open] > summary {
background-color: #ccf;
}पूर्वनिर्धारित रूपमा, कर्सर एरो जस्तो देखिन्छ, तर यदि तपाइँ यसलाई एक हुन चाहनुहुन्छ भने इशारा गर्दै हात यसको सट्टा यसलाई प्रयोग गर्नुहोस्:
details {
cursor: pointer;
}व्यवहार
सेटिङ व्यवहारहरू धेरै सीमित छन्, त्यहाँ वास्तवमा तपाईले गर्न सक्ने एउटा मात्र कुरा छ र त्यो प्रकट गरिएको पाठ बनाउनु हो पूर्वनिर्धारित रूपमा खोल्नुहोस्.
एकॉर्डियनलाई यसको खुला अवस्थामा सुरु गर्न, बुलियन थप्नुहोस् खुला को विशेषता ट्याग:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>थप पढ्नुहोस्
यो सामग्री लुकाउन र प्रकट गर्न एक नेटिभ HTML5 accordion हो। धेरै राम्रो, सही?
म कुन विशेषताहरू प्रयोग गर्न सक्छु?
निम्न विशेषताहरु को लागी प्रयोग गर्न सकिन्छ ट्याग:
| विशेषताहरु | मूल्य | सारांश |
|---|---|---|
| खुला | खुला | पूर्वनिर्धारित छ खुल्ला छैन. |
| id | मूल्य | एक अद्वितीय पहिचानकर्ता प्रदान गर्दछ। |
| वर्ग | वर्गनामहरू | तत्वमा वर्ग नामहरू असाइन गर्दछ। |
| शैली | CSS-मानहरू | तत्वमा CSS शैलीहरू तोक्छ। |
त्यसोभए सीमितताहरू के हुन्? त्यहाँ सधैं एक क्याच छ, हैन?
इन्टरनेट एक्सप्लोररको लागि कुनै समर्थन छैन
यो HTML5-मात्र एकॉर्डियनले इन्टरनेट एक्सप्लोररको कुनै पनि संस्करणमा काम गर्दैन। यदि तपाइँसँग IE11 लाई समर्थन छ भने तपाइँले JQuery प्रयोग गरेर फरक फलब्याक समाधान प्रयोग गर्नुपर्नेछ। सबै अन्य ब्राउजर समर्थन र .
कुनै अनुकूलित एनिमेसन वा संक्रमण
जब तपाईं परिमार्जन गर्न सक्नुहुन्छ र उपस्थिति (माथि देखाइएको रूपमा) शैली, तपाईं कुनै पनि पाठ एनिमेसन वा ट्रान्जिसन प्रकट गर्न सक्षम हुनुहुने छैन। यदि तपाइँ त्यसो गर्न चाहनुहुन्छ भने तपाइँलाई अर्को CSS/JSS accordion समाधान चाहिन्छ।
स्क्रिन रिडर र पहुँच
यो स्वदेशी हो HTML5 र यो *पहुँचयोग्य* हुनुपर्छ तर पत्ता लागेको छ कि वास्तविक प्रकट गरिएको पाठ सधैँ स्क्रिन रिडरद्वारा सही रूपमा घोषणा गरिएको छैन।
सन्दर्भ:
