ដួលរលំ

បិទ/បើកលទ្ធភាពមើលឃើញនៃមាតិកានៅទូទាំងគម្រោងរបស់អ្នកជាមួយនឹងថ្នាក់មួយចំនួន និងកម្មវិធីជំនួយ JavaScript របស់យើង។

របៀបដែលវាដំណើរការ

កម្មវិធីជំនួយ JavaScript ដែលដួលរលំត្រូវបានប្រើដើម្បីបង្ហាញ និងលាក់មាតិកា។ ប៊ូតុង ឬ​យុថ្កា​ត្រូវ​បាន​ប្រើ​ជា​គន្លឹះ​ដែល​ត្រូវ​បាន​ផ្គូផ្គង​ទៅ​នឹង​ធាតុ​ជាក់លាក់​ដែល​អ្នក​បិទ​បើក។ ការបង្រួមធាតុមួយនឹងធ្វើឱ្យចលនា heightពីតម្លៃបច្ចុប្បន្នរបស់វាទៅជា 0. ដោយគិតពីរបៀបដែល CSS គ្រប់គ្រងចលនា អ្នកមិនអាចប្រើ paddingលើ .collapseធាតុបានទេ។ ជំនួសមកវិញ ប្រើថ្នាក់ជាធាតុរុំឯករាជ្យ។

ឧទាហរណ៍

ចុចប៊ូតុងខាងក្រោមដើម្បីបង្ហាញ និងលាក់ធាតុផ្សេងទៀតតាមរយៈការផ្លាស់ប្តូរថ្នាក់៖

• .collapseលាក់មាតិកា
• .collapsingត្រូវបានអនុវត្តក្នុងអំឡុងពេលអន្តរកាល
• .collapse.showបង្ហាញមាតិកា

ជាទូទៅ យើងសូមណែនាំឱ្យប្រើប៊ូតុងដែលមាន data-targetគុណលក្ខណៈ។ ខណៈ​ពេល​ដែល​មិន​ត្រូវ​បាន​ផ្ដល់​អនុសាសន៍​ពី​ទស្សនៈ​ន័យ​ធៀប អ្នក​ក៏​អាច​ប្រើ​តំណ​ដែល​មាន href​គុណលក្ខណៈ (និង a role="button") ផង​ដែរ។ ក្នុង​ករណី​ទាំង​ពីរ​នេះ data-toggle="collapse"​ត្រូវ​បាន​ទាមទារ​។

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-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>

ផ្ដេក

កម្មវិធីជំនួយការដួលរលំក៏គាំទ្រការដួលរលំផ្តេកផងដែរ។ បន្ថែម .widthថ្នាក់កែប្រែដើម្បីផ្លាស់ប្តូរ widthជំនួស heightហើយកំណត់ a widthលើធាតុកូនភ្លាមៗ។ មានអារម្មណ៍សេរីក្នុងការសរសេរ Sass ផ្ទាល់ខ្លួនរបស់អ្នក ប្រើរចនាប័ទ្មក្នុងបន្ទាត់ ឬប្រើ ឧបករណ៍ប្រើប្រាស់ទទឹង របស់យើង ។

<p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse width" id="collapseWidthExample">
    <div class="card card-body" style="width: 320px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

គោលដៅច្រើន។

A <button>ឬ <a>អាចបង្ហាញ និងលាក់ធាតុជាច្រើនដោយយោងពួកវាដោយប្រើឧបករណ៍ជ្រើសរើស JQuery នៅក្នុង hrefឬ data-targetគុណលក្ខណៈរបស់វា។ ច្រើន <button>ឬ <a>អាចបង្ហាញ និងលាក់ធាតុមួយ ប្រសិនបើពួកវានីមួយៗយោងវាជាមួយ hrefឬ data-targetគុណលក្ខណៈ របស់ពួកគេ។

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-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>

ឧទាហរណ៏នៃ accordion

ដោយ​ប្រើ ​សមាសភាគ ​កាត អ្នក​អាច​ពង្រីក​ឥរិយាបថ​ដួលរលំ​លំនាំដើម​ដើម្បី​បង្កើត​ accordion។ ដើម្បីសម្រេចបាននូវរចនាប័ទ្ម accordion ឱ្យបានត្រឹមត្រូវត្រូវប្រាកដថាប្រើ .accordionជាកន្សែងរុំ។

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the second accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
</div>

ភាពងាយស្រួល

ត្រូវប្រាកដថាបន្ថែម aria-expandedទៅធាតុត្រួតពិនិត្យ។ គុណលក្ខណៈនេះបង្ហាញយ៉ាងច្បាស់អំពីស្ថានភាពបច្ចុប្បន្ននៃធាតុដែលអាចដួលរលំបានដែលភ្ជាប់ទៅនឹងវត្ថុបញ្ជាទៅកាន់អ្នកអានអេក្រង់ និងបច្ចេកវិទ្យាជំនួយស្រដៀងគ្នា។ ប្រសិនបើធាតុដែលអាចបង្រួមបានត្រូវបានបិទតាមលំនាំដើម គុណលក្ខណៈនៅលើធាតុវត្ថុបញ្ជាគួរតែមានតម្លៃ aria-expanded="false". ប្រសិនបើអ្នកបានកំណត់ធាតុដែលអាចបង្រួមបានឱ្យបើកតាមលំនាំដើមដោយប្រើ showថ្នាក់ សូមកំណត់ aria-expanded="true"លើវត្ថុបញ្ជាជំនួសវិញ។ កម្មវិធីជំនួយនឹងបិទបើកលក្ខណៈនេះដោយស្វ័យប្រវត្តិនៅលើវត្ថុបញ្ជាដោយផ្អែកលើថាតើធាតុដែលអាចបង្រួមបានត្រូវបានបើក ឬបិទ (តាមរយៈ JavaScript ឬដោយសារតែអ្នកប្រើប្រាស់បានកេះធាតុវត្ថុបញ្ជាផ្សេងទៀតដែលភ្ជាប់ជាមួយធាតុដែលអាចបង្រួមបានដូចគ្នា)។ ប្រសិនបើធាតុ HTML របស់ធាតុវត្ថុបញ្ជាមិនមែនជាប៊ូតុង (ឧ. <a>ឬ <div>) គុណលក្ខណៈrole="button"គួរតែត្រូវបានបន្ថែមទៅធាតុ។

ប្រសិនបើធាតុវត្ថុបញ្ជារបស់អ្នកកំពុងកំណត់គោលដៅធាតុដែលអាចបង្រួមបានតែមួយ - ពោលគឺ data-targetគុណលក្ខណៈកំពុងចង្អុលទៅ idឧបករណ៍ជ្រើសរើស - អ្នកគួរតែបន្ថែម aria-controlsគុណលក្ខណៈទៅធាតុវត្ថុបញ្ជាដែលមានធាតុដែល idអាចបង្រួមបាន។ កម្មវិធីអានអេក្រង់ទំនើប និងបច្ចេកវិជ្ជាជំនួយស្រដៀងគ្នា ប្រើប្រាស់លក្ខណៈនេះ ដើម្បីផ្តល់ឱ្យអ្នកប្រើប្រាស់នូវផ្លូវកាត់បន្ថែម ដើម្បីរុករកដោយផ្ទាល់ទៅកាន់ធាតុដែលអាចបង្រួមបាន។

ចំណាំថាការអនុវត្តបច្ចុប្បន្នរបស់ Bootstrap មិនគ្របដណ្តប់អន្តរកម្មក្តារចុចផ្សេងៗដែលបានពិពណ៌នានៅក្នុង លំនាំ accordion ការណែនាំអំពីអ្នកនិពន្ធ ARIA ទេ - អ្នកនឹងត្រូវបញ្ចូលវាដោយខ្លួនឯងជាមួយនឹង JavaScript ផ្ទាល់ខ្លួន។

ការប្រើប្រាស់

កម្មវិធីជំនួយការដួលរលំប្រើថ្នាក់មួយចំនួនដើម្បីដោះស្រាយការលើកធ្ងន់៖

• .collapseលាក់មាតិកា
• .collapse.showបង្ហាញមាតិកា
• .collapsingត្រូវបានបន្ថែមនៅពេលដែលការផ្លាស់ប្តូរចាប់ផ្តើម ហើយត្រូវបានដកចេញនៅពេលដែលវាបញ្ចប់

ថ្នាក់ទាំងនេះអាចរកបាននៅក្នុង _transitions.scss.

តាមរយៈគុណលក្ខណៈទិន្នន័យ

គ្រាន់​តែ​បន្ថែម data-toggle="collapse"​និង​មួយ data-target​ទៅ​ធាតុ​ដើម្បី​កំណត់​ការ​គ្រប់​គ្រង​ដោយ​ស្វ័យ​ប្រវត្តិ​នៃ​ធាតុ​មួយ​ឬ​ច្រើន​ដែល​អាច​បង្រួម​។ គុណលក្ខណៈ data-targetទទួលយកឧបករណ៍ជ្រើសរើស CSS ដើម្បីអនុវត្តការដួលរលំ។ ត្រូវប្រាកដថាបន្ថែមថ្នាក់ collapseទៅធាតុដែលអាចបង្រួមបាន។ ប្រសិនបើអ្នកចង់ឱ្យវាបើកលំនាំដើម សូមបន្ថែមថ្នាក់បន្ថែម show។

ដើម្បីបន្ថែមការគ្រប់គ្រងក្រុមដូច accordion ទៅតំបន់ដែលអាចបង្រួមបាន សូមបន្ថែមគុណលក្ខណៈទិន្នន័យ data-parent="#selector"។ សូមមើលការបង្ហាញដើម្បីមើលសកម្មភាពនេះ។

តាមរយៈ JavaScript

បើកដំណើរការដោយដៃជាមួយ៖

$('.collapse').collapse()

ជម្រើស

ជម្រើសអាចត្រូវបានឆ្លងកាត់តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ JavaScript ។ សម្រាប់គុណលក្ខណៈទិន្នន័យ សូមបន្ថែមឈ្មោះជម្រើសទៅ data-ដូចក្នុង data-parent="".

វិធីសាស្រ្ត

.collapse(options)

ធ្វើឱ្យមាតិការបស់អ្នកសកម្មជាធាតុដែលអាចបង្រួមបាន។ ទទួលយកជម្រើសស្រេចចិត្ត object។

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

បិទ/បើកធាតុដែលអាចបង្រួមបានដើម្បីបង្ហាញ ឬលាក់។ ត្រឡប់​ទៅ​អ្នក​ហៅ​ទូរសព្ទ​វិញ មុន​ពេល​ធាតុ​ដែល​អាច​បង្រួម​បាន​ត្រូវ​បាន​បង្ហាញ ឬ​លាក់ (ឧ. មុន​ពេល shown.bs.collapseឬ hidden.bs.collapse​ព្រឹត្តិការណ៍​កើត​ឡើង)។

.collapse('show')

បង្ហាញធាតុដែលអាចបង្រួមបាន។ ត្រឡប់​ទៅ​អ្នក​ហៅ​ទូរសព្ទ​វិញ មុន​ពេល​ធាតុ​ដែល​អាច​បង្រួម​បាន​ត្រូវ​បាន​បង្ហាញ​យ៉ាង​ពិត​ប្រាកដ (ឧ. មុន shown.bs.collapse​ព្រឹត្តិការណ៍​កើត​ឡើង)។

.collapse('hide')

លាក់ធាតុដែលអាចបង្រួមបាន។ ត្រឡប់​ទៅ​អ្នក​ហៅ​ទូរសព្ទ​វិញ មុន​ពេល​ធាតុ​ដែល​អាច​បង្រួម​បាន​ត្រូវ​បាន​លាក់​យ៉ាង​ពិត​ប្រាកដ (ឧ. មុន hidden.bs.collapse​ព្រឹត្តិការណ៍​កើត​ឡើង)។

.collapse('dispose')

បំផ្លាញការដួលរលំនៃធាតុមួយ។

ព្រឹត្តិការណ៍

ថ្នាក់ដួលរលំរបស់ Bootstrap បង្ហាញព្រឹត្តិការណ៍មួយចំនួនសម្រាប់ការភ្ជាប់មុខងារដួលរលំ។

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})