मुख्य सामग्रीमा जानुहोस् कागजात नेभिगेसनमा जानुहोस्
in English

संक्षिप्त गर्नुहोस्

केही कक्षाहरू र हाम्रा JavaScript प्लगइनहरूमार्फत तपाईंको परियोजनामा ​​सामग्रीको दृश्यता टगल गर्नुहोस्।

यसले कसरी काम गर्छ

संक्षिप्त JavaScript प्लगइन सामग्री देखाउन र लुकाउन प्रयोग गरिन्छ। बटन वा एन्करहरू ट्रिगरहरूका रूपमा प्रयोग गरिन्छ जुन तपाईंले टगल गर्ने विशेष तत्वहरूमा म्याप गरिन्छ। एउटा तत्वलाई संक्षिप्त गर्दा heightयसको हालको मानबाट एनिमेट हुनेछ 0। CSS ले एनिमेसनहरू कसरी ह्यान्डल गर्छ भन्ने कुरालाई ध्यानमा राख्दै, तपाईंले तत्वमा प्रयोग paddingगर्न सक्नुहुन्न। .collapseबरु, क्लासलाई स्वतन्त्र र्यापिङ तत्वको रूपमा प्रयोग गर्नुहोस्।

यस कम्पोनेन्टको एनिमेसन प्रभाव prefers-reduced-motionमिडिया क्वेरीमा निर्भर हुन्छ। हाम्रो पहुँच कागजातको घटाइएको गति खण्ड हेर्नुहोस् ।

उदाहरण

वर्ग परिवर्तनहरू मार्फत अर्को तत्व देखाउन र लुकाउन तलका बटनहरूमा क्लिक गर्नुहोस्:

  • .collapseसामग्री लुकाउँछ
  • .collapsingसंक्रमणकालमा लागू हुन्छ
  • .collapse.showसामग्री देखाउँछ

सामान्यतया, हामी data-bs-targetविशेषताको साथ बटन प्रयोग गर्न सिफारिस गर्छौं। सिमान्टिक दृष्टिकोणबाट सिफारिस नगर्दा, तपाईं hrefविशेषता (र a role="button") सँग लिङ्क प्रयोग गर्न सक्नुहुन्छ। दुवै अवस्थामा, data-bs-toggle="collapse"आवश्यक छ।

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

धेरै लक्ष्यहरू

A <button>वा धेरै तत्वहरूलाई यसको वा विशेषतामा <a>चयनकर्तासँग सन्दर्भ गरेर देखाउन र लुकाउन सक्छ । धेरै वा देखाउन र लुकाउन सक्छ यदि तिनीहरू प्रत्येकले आफ्नो वा विशेषतासँग सन्दर्भ गर्दछhrefdata-bs-target<button><a>hrefdata-bs-target

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
</div>

पहुँच

aria-expandedनियन्त्रण तत्व थप्न निश्चित हुनुहोस् । यो विशेषताले स्क्रिन रिडरहरू र समान सहायक प्रविधिहरूमा नियन्त्रणमा बाँधिएको संकुचित तत्वको हालको अवस्था स्पष्ट रूपमा बुझाउँछ। यदि संकुचित तत्व पूर्वनिर्धारित रूपमा बन्द गरिएको छ भने, नियन्त्रण तत्वमा विशेषताको मान हुनुपर्छ aria-expanded="false"showयदि तपाईंले वर्ग प्रयोग गरेर पूर्वनिर्धारित रूपमा खोल्न मिल्ने तत्व सेट गर्नुभएको छ भने , aria-expanded="true"यसको सट्टा नियन्त्रणमा सेट गर्नुहोस्। प्लगइनले स्वचालित रूपमा यो विशेषतालाई नियन्त्रणमा टगल गर्नेछ कि मिलाउन मिल्ने तत्व खोलिएको वा बन्द गरिएको छ वा छैन भन्ने आधारमा (जाभास्क्रिप्ट मार्फत, वा प्रयोगकर्ताले अर्को नियन्त्रण तत्व ट्रिगर गरेको कारणले पनि उही संकुचनयोग्य तत्वसँग जोडिएको छ)। यदि नियन्त्रण तत्वको HTML तत्व बटन होइन (जस्तै, an <a>वा <div>), विशेषताrole="button"तत्वमा थपिनुपर्छ।

यदि तपाइँको नियन्त्रण तत्वले एकल कोल्प्सिबल एलिमेन्टलाई लक्षित गर्दैछ - अर्थात् data-bs-targetएट्रिब्युटले idचयनकर्तालाई पोइन्ट गरिरहेको छ - तपाइँले aria-controlsकन्ट्रोल एलिमेन्टमा एट्रिब्यूट थप्नुपर्छ, जसमा idकोल्प्सिबल एलिमेन्ट समावेश छ। आधुनिक स्क्रिन रिडरहरू र समान सहायक प्रविधिहरूले यो विशेषताको प्रयोग गरेर प्रयोगकर्ताहरूलाई सिधै कोल्प्सबल एलिमेन्टमा नेभिगेट गर्न थप सर्टकटहरू प्रदान गर्दछ।

नोट गर्नुहोस् कि बुटस्ट्र्यापको हालको कार्यान्वयनले WAI-ARIA Authoring Practices 1.1 accordion ढाँचामा वर्णन गरिएका विभिन्न वैकल्पिक किबोर्ड अन्तरक्रियाहरूलाई कभर गर्दैन - तपाईंले यसलाई आफू अनुकूल JavaScript सँग समावेश गर्न आवश्यक हुनेछ।

सास

चरहरू

$transition-collapse:         height .35s ease;

कक्षाहरू

संकुचित ट्रान्जिसन कक्षाहरू फेला पार्न सकिन्छ scss/_transitions.scssकिनकि यी धेरै कम्पोनेन्टहरू (संकुचन र एकॉर्डियन) मा साझेदारी गरिएको छ।

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);
}

प्रयोग

पतन प्लगइनले भारी लिफ्टिङ ह्यान्डल गर्न केही वर्गहरू प्रयोग गर्दछ:

  • .collapseसामग्री लुकाउँछ
  • .collapse.showसामग्री देखाउँछ
  • .collapsingसंक्रमण सुरु हुँदा थपिन्छ, र समाप्त भएपछि हटाइन्छ

यी कक्षाहरू मा फेला पार्न सकिन्छ _transitions.scss

डाटा विशेषताहरू मार्फत

केवल एक वा बढी मिल्ने तत्वहरूको नियन्त्रण स्वतः असाइन गर्न तत्वमा थप्नुहोस् data-bs-toggle="collapse"र a । एट्रिब्युटले CSS चयनकर्ता स्वीकार गर्छ जसमा पतन लागू हुन्छ data-bs-target। संकुचित तत्वमा data-bs-targetवर्ग थप्न निश्चित हुनुहोस् । collapseयदि तपाइँ यसलाई पूर्वनिर्धारित रूपमा खोल्न चाहनुहुन्छ भने, अतिरिक्त कक्षा थप्नुहोस् show

एकोर्डियन-जस्तै समूह व्यवस्थापनलाई मिलाउन मिल्ने क्षेत्रमा थप्न, डेटा विशेषता थप्नुहोस् data-bs-parent="#selector"। यसलाई कार्यमा हेर्नको लागि डेमोलाई सन्दर्भ गर्नुहोस्।

जाभास्क्रिप्ट मार्फत

म्यानुअल रूपमा सक्षम गर्नुहोस्:

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-bs-, जस्तै मा data-bs-parent=""

नाम टाइप गर्नुहोस् पूर्वनिर्धारित विवरण
parent चयनकर्ता | jQuery वस्तु | DOM तत्व false यदि अभिभावक प्रदान गरिएको छ भने, यो मिलाउन मिल्ने वस्तु देखाउँदा निर्दिष्ट अभिभावक अन्तर्गतका सबै मिलाउन मिल्ने तत्वहरू बन्द हुनेछन्। (परम्परागत एकॉर्डियन व्यवहार जस्तै - यो cardवर्ग मा निर्भर छ)। एट्रिब्युट टार्गेट कोल्प्सिबल एरियामा सेट गर्नुपर्छ।
toggle बुलियन true आह्वानमा मिल्ने तत्वलाई टगल गर्छ

विधिहरू

एसिन्क्रोनस विधि र संक्रमण

सबै एपीआई विधिहरू एसिन्क्रोनस छन् र एक संक्रमण सुरु गर्नुहोस् । तिनीहरू संक्रमण सुरु हुने बित्तिकै तर यो समाप्त हुनु अघि कलरमा फर्कन्छन् । थप रूपमा, ट्रान्जिसनिङ कम्पोनेन्टमा विधि कललाई बेवास्ता गरिनेछ

थप जानकारीको लागि हाम्रो जाभास्क्रिप्ट कागजात हेर्नुहोस्

तपाइँको सामग्री एक संकुचन तत्व को रूप मा सक्रिय गर्दछ। वैकल्पिक विकल्पहरू स्वीकार गर्दछ object

तपाईं कन्स्ट्रक्टरसँग पतन उदाहरण सिर्जना गर्न सक्नुहुन्छ, उदाहरणका लागि:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
विधि विवरण
toggle देखाइएका वा लुकाउन मिल्ने तत्वलाई टगल गर्छ। सङ्कलनयोग्य तत्व वास्तवमा देखाइयो वा लुकाइनु अघि कलरमा फर्कन्छ (जस्तै shown.bs.collapseवा hidden.bs.collapseघटना हुनु अघि)।
show मिलाउन मिल्ने तत्व देखाउँछ। कोल्प्सिबल तत्व वास्तवमा देखाइनु अघि कलरमा फर्कन्छ (उदाहरणका लागि, shown.bs.collapseघटना हुनु अघि)।
hide मिलाउन मिल्ने तत्व लुकाउँछ। कोल्प्सिबल एलिमेन्ट वास्तवमा लुकाउनु अघि कलरमा फर्कन्छ (उदाहरणका लागि, hidden.bs.collapseघटना हुनु अघि)।
dispose तत्वको पतनलाई नष्ट गर्छ। (DOM तत्वमा भण्डारण गरिएको डाटा हटाउँछ)
getInstance स्थिर विधि जसले तपाइँलाई DOM तत्वसँग सम्बन्धित पतन उदाहरण प्राप्त गर्न अनुमति दिन्छ, तपाइँ यसलाई यसरी प्रयोग गर्न सक्नुहुन्छ:bootstrap.Collapse.getInstance(element)
getOrCreateInstance स्थिर विधि जसले DOM तत्वसँग सम्बन्धित पतन उदाहरण फिर्ता गर्छ वा यसलाई प्रारम्भ नगरिएको अवस्थामा नयाँ सिर्जना गर्दछ। तपाईं यसलाई यसरी प्रयोग गर्न सक्नुहुन्छ:bootstrap.Collapse.getOrCreateInstance(element)

घटनाहरू

बुटस्ट्र्यापको पतन वर्गले पतन कार्यक्षमतामा हुक गर्नका लागि केही घटनाहरू उजागर गर्दछ।

घटना प्रकार विवरण
show.bs.collapse showउदाहरण विधि बोलाउँदा यो घटना तुरुन्तै सक्रिय हुन्छ ।
shown.bs.collapse यो घटना हटाइन्छ जब एक पतन तत्व प्रयोगकर्तालाई दृश्यात्मक बनाइन्छ (CSS ट्रान्जिसनहरू पूरा हुनको लागि पर्खनेछ)।
hide.bs.collapse यो घटना तुरुन्तै निकालिएको छ जब hideविधि कल गरिएको छ।
hidden.bs.collapse यो घटना हटाइन्छ जब एक पतन तत्व प्रयोगकर्ताबाट लुकाइएको छ (CSS ट्रान्जिसनहरू पूरा हुनको लागि पर्खनेछ)।
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})