Source

კოლაფსი

შეცვალეთ კონტენტის ხილვადობა თქვენს პროექტში რამდენიმე კლასებით და ჩვენი JavaScript დანამატებით.

Როგორ მუშაობს

ჩაკეცვის JavaScript მოდული გამოიყენება შინაარსის საჩვენებლად და დასამალად. ღილაკები ან წამყვანები გამოიყენება როგორც ტრიგერები, რომლებიც შედგენილია კონკრეტულ ელემენტებზე, რომლებსაც გადართავთ. ელემენტის ჩაკეცვა გამოიწვევს ანიმაციას heightმისი ამჟამინდელი მნიშვნელობიდან 0. იმის გათვალისწინებით, თუ როგორ ამუშავებს CSS ანიმაციებს, თქვენ არ შეგიძლიათ გამოიყენოთ paddingელემენტზე .collapse. ამის ნაცვლად, გამოიყენეთ კლასი, როგორც დამოუკიდებელი შეფუთვის ელემენტი.

ამ კომპონენტის ანიმაციური ეფექტი დამოკიდებულია prefers-reduced-motionმედიის მოთხოვნაზე. იხილეთ ჩვენი ხელმისაწვდომობის დოკუმენტაციის შემცირებული მოძრაობის განყოფილება .

მაგალითი

დააწკაპუნეთ ქვემოთ მოცემულ ღილაკებზე, რათა ნახოთ და დამალოთ სხვა ელემენტი კლასის ცვლილებების მეშვეობით:

  • .collapseმალავს შინაარსს
  • .collapsingგამოიყენება გადასვლების დროს
  • .collapse.showაჩვენებს შინაარსს

შეგიძლიათ გამოიყენოთ ბმული hrefატრიბუტით, ან ღილაკი data-targetატრიბუტით. ორივე შემთხვევაში data-toggle="collapse"აუცილებელია.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<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">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

მრავალი სამიზნე

A-ს <button>შეუძლია <a>მრავალი ელემენტის ჩვენება და დამალვა, მათზე მითითებით JQuery სელექტორით თავის hrefან data-targetატრიბუტში. მრავალჯერადი <button>ან <a>შეუძლია ელემენტის ჩვენება და დამალვა, თუ თითოეული მათგანი მიუთითებს მას თავისი hrefან data-targetატრიბუტით

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<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">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

აკორდეონის მაგალითი

ბარათის კომპონენტის გამოყენებით , შეგიძლიათ გააფართოვოთ ნაგულისხმევი კოლაფსის ქცევა აკორდეონის შესაქმნელად. აკორდეონის სტილის სწორად მისაღწევად, აუცილებლად გამოიყენეთ .accordionროგორც შესაფუთი.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. კვების სატვირთო მანქანა quinoa nesciunt laborum eiusmod. ბრანჩი 3 მგლის მთვარე დრო, sunt aliqua დააყენა ჩიტი მასზე squid ერთი წარმოშობის ყავა nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. რეკლამა ვეგანის გარდა ჯალათი ვიცე ლომო. გამაშები occaecat ხელნაკეთი ლუდის ფერმა-მაგიდაზე, ნედლი ჯინსის ესთეტიკური სინთეზური ნესტიანი, თქვენ ალბათ არ გსმენიათ მათ შესახებ accusamus labore მდგრადი VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" 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">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link 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">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link 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">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </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-ის ამჟამინდელი იმპლემენტაცია არ მოიცავს კლავიატურის სხვადასხვა ურთიერთქმედებებს, რომლებიც აღწერილია WAI-ARIA საავტორო პრაქტიკის 1.1 აკორდეონის შაბლონში - თქვენ მოგიწევთ მათი ჩართვა მორგებული JavaScript-ით.

გამოყენება

კოლაფსის დანამატი იყენებს რამდენიმე კლასს მძიმე აწევისთვის:

  • .collapseმალავს შინაარსს
  • .collapse.showაჩვენებს შინაარსს
  • .collapsingემატება გადასვლის დაწყებისას და ამოღებულია როცა დასრულდება

ამ კლასების ნახვა შეგიძლიათ _transitions.scss.

მონაცემთა ატრიბუტების მეშვეობით

უბრალოდ დაამატეთ data-toggle="collapse"და a data-targetელემენტს, რათა ავტომატურად მიენიჭოთ კონტროლი ერთი ან მეტი დასაკეცი ელემენტის. ატრიბუტი იღებს CSS ამომრჩეველს data-targetკოლაფსის გამოსაყენებლად. დარწმუნდით, რომ დაამატეთ კლასი collapseდასაკეც ელემენტს. თუ გსურთ ნაგულისხმევად გახსნა, დაამატეთ დამატებითი კლასი show.

აკორდეონის მსგავსი ჯგუფის მართვის დასამატებლად დასაკეცი ზონაში, დაამატეთ მონაცემთა ატრიბუტი data-parent="#selector". იხილეთ დემო ვერსია, რომ ნახოთ ეს მოქმედებაში.

JavaScript-ის საშუალებით

ხელით ჩართეთ:

$('.collapse').collapse()

Პარამეტრები

ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-, როგორც data-parent="".

სახელი ტიპი ნაგულისხმევი აღწერა
მშობელი სელექტორი | jQuery ობიექტი | DOM ელემენტი ყალბი თუ მშობელი არის მოწოდებული, მაშინ ყველა დასაკეცი ელემენტი მითითებული მშობლის ქვეშ დაიხურება, როდესაც ეს დასაკეცი ელემენტი გამოჩნდება. (ტრადიციული აკორდეონის ქცევის მსგავსი - ეს კლასზეა დამოკიდებული card). ატრიბუტი უნდა იყოს დაყენებული სამიზნე დასაკეცი ზონაზე.
გადართვა ლოგიკური მართალია რთავს დასაკეც ელემენტს გამოძახებისას

მეთოდები

ასინქრონული მეთოდები და გადასვლები

ყველა API მეთოდი ასინქრონულია და იწყებს გადასვლას . ისინი უბრუნდებიან აბონენტს გადასვლის დაწყებისთანავე, მაგრამ მის დასრულებამდე . გარდა ამისა, მეთოდის გამოძახება გარდამავალ კომპონენტზე იგნორირებული იქნება .

იხილეთ ჩვენი JavaScript დოკუმენტაცია დამატებითი ინფორმაციისთვის .

.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-ის კოლაფსის კლასი ავლენს რამდენიმე მოვლენას კოლაფსის ფუნქციონირებაში ჩასართავად.

ღონისძიების ტიპი აღწერა
ჩვენება.ბს.ჩამოქცევა ეს მოვლენა მაშინვე ირთვება, როდესაც showგამოიძახება ეგზემპლარის მეთოდი.
ნაჩვენებია.ბს.ჩამოშლა ეს ღონისძიება გააქტიურებულია, როდესაც კოლაფსის ელემენტი მომხმარებლისთვის ხილული გახდება (დაელოდება CSS გადასვლების დასრულებას).
დამალვა.ბს.ჩამოქცევა ეს ღონისძიება ჩართულია მაშინვე, როდესაც hideმეთოდი გამოიძახება.
დამალული.ბს.ჩამოქცევა ეს ღონისძიება გააქტიურებულია, როდესაც მომხმარებლისგან დამალულია კოლაფსის ელემენტი (დაელოდება CSS გადასვლების დასრულებას).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})