జెక్కీ మొబైల్ కలపాలు

పిల్లికించబడిన విషయాల స్థానం

పిల్లికించబడినవి మీరు విషయాన్ని మరొకసారి దాటవచ్చు లేదా ప్రదర్శించవచ్చు - పార్టియల్ ఇన్ఫర్మేషన్ స్టోరేజ్‌కు అనువు కాగలదు.

పిల్లికించబడిన విషయాలను సృష్టించడానికి, కొన్ని కంటైనర్‌కు data-role="collapsible" అంతర్జాల స్పెసిఫికేషన్ కేటాయించండి. కంటైనర్ (div) లో, ఒక శీర్షిక అంశాన్ని (h1-h6) చేర్చండి, అప్పటి నుండి మీరు విస్తరించడానికి కావలసిన ఏదైనా HTML మేరుకు జోడించండి:

ఉదాహరణ

<div data-role="collapsible">
  <h1>నాకు క్లిక్ చేయండి - నేను కూడా పిల్లికించబడవచ్చు!</h1>
  <p>నేను పిల్లికించబడిన విషయం.</p>
</div>

నేను ప్రయత్నించండి

డిఫాల్ట్‌గా, ఈ విషయం మూసివుంటుంది. పేజీ లోడ్‌చేయడంలో విషయాన్ని విస్తరించడానికి data-collapsed="false" ఉపయోగించండి:

ఉదాహరణ

<div data-role="collapsible" data-collapsed="false">
  <h1>నాకు క్లిక్ చేయండి - నేను కూడా పిల్లికించబడవచ్చు!</h1>
  <p>ఇప్పుడు నేను మొదటిది విస్తరించబడినది.</p>
</div>

నేను ప్రయత్నించండి

అనుసంధానం చేయబడిన పిల్లికించబడిన బ్లాక్‌లు

పిల్లికించబడిన విషయాలను అనుసంధానం చేయవచ్చు:

ఉదాహరణ

<div data-role="collapsible">
  <h1>నాకు క్లిక్ చేయండి - నేను కూడా పిల్లికించబడవచ్చు!</h1>
  <p>నేను విస్తరించబడిన విషయం.</p>
  <div data-role="collapsible">
    <h1>నాకు క్లిక్ చేయండి - నేను అనుసంధానం చేయబడిన పిల్లికించబడిన బ్లాక్‌ను కలిగివుంటాను!</h1>
    <p>నేను అనుసంధానం చేయబడిన పిల్లికించబడిన బ్లాక్‌లో విస్తరించబడిన విషయం.</p>
  </div>
</div>

నేను ప్రయత్నించండి

అన్నికి విజ్ఞప్తి:పిల్లికించబడిన విషయాలు మీకు కావలసిన సంఖ్యలో అనుసంధానం చేయవచ్చు.

పిల్లికించబడిన సెట్‌లు

పిల్లికించబడిన సెట్‌లు (కాలించే పట్టాలుగా పిలువబడే) అనేది కలిపబడిన పిల్లికించబడిన బ్లాక్‌లు. కొత్త బ్లాక్‌ను తెరిచినప్పుడు, ఇతర బ్లాక్‌లు మూసిపోతాయి.

కొన్ని విషయాలు సృష్టించండి, ఆపై data-role="collapsible-set" ద్వారా కొత్త కంటైనర్ తో ఈ పిల్లికించబడిన బ్లాక్‌ను పాక్షించండి:

ఉదాహరణ

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>నాకు క్లిక్ చేయండి - నేను కూడా పిల్లికించబడవచ్చు!</h1>
    <p>నేను విస్తరించబడిన విషయం.</p>
  </div>
  <div data-role="collapsible">
    <h1>నాకు క్లిక్ చేయండి - నేను కూడా పిల్లికించబడవచ్చు!</h1>
    <p>నేను విస్తరించబడిన విషయం.</p>
  </div>
</div>

నేను ప్రయత్నించండి

更多实例

通过 data-inset 属性来删除圆角
如何移除 collapsibles 上的圆角。
通过 data-mini 最小化 collapsibles
如何使 collapsibles 更小巧。
通过 data-collapsed-icon 和 data-expanded-icon 改变图标
如何改变 collapsibles 的图标（默认是 + 和 -）。