Source

ჩამოსაშლელები

გადართეთ კონტექსტური გადაფარვები ბმულების სიების საჩვენებლად და სხვა Bootstrap ჩამოსაშლელი მოდულით.

მიმოხილვა

ჩამოსაშლელები არის გადართვადი, კონტექსტური გადაფარვები ბმულების სიების საჩვენებლად და სხვა. ისინი ინტერაქტიულია ჩართული Bootstrap ჩამოსაშლელი JavaScript მოდულით. მათი გადართვა ხდება დაწკაპუნებით და არა მატრიცით; ეს არის მიზანმიმართული დიზაინის გადაწყვეტილება.

ჩამოსაშლელი ფაილები აგებულია მესამე მხარის ბიბლიოთეკაზე, Popper.js , რომელიც უზრუნველყოფს დინამიურ პოზიციონირებას და ხედვის პორტის ამოცნობას. დარწმუნდით, რომ ჩართეთ popper.min.js Bootstrap-ის JavaScript-მდე ან გამოიყენეთ bootstrap.bundle.min.js/ bootstrap.bundle.jsრომელიც შეიცავს Popper.js-ს. Popper.js არ გამოიყენება ჩამოსაშლელი ფაილების პოზიციონირებისთვის navbars-ში, თუმცა დინამიური პოზიციონირება არ არის საჭირო.

თუ თქვენ აშენებთ ჩვენს JavaScript-ს წყაროდან, ის მოითხოვსutil.js .

ხელმისაწვდომობა

WAI ARIA სტანდარტი განსაზღვრავს რეალურ role="menu"ვიჯეტს , მაგრამ ეს სპეციფიკურია აპლიკაციის მსგავსი მენიუებისთვის, რომლებიც ახდენენ მოქმედებებს ან ფუნქციებს. ARIA მენიუები შეიძლება შეიცავდეს მხოლოდ მენიუს ელემენტებს, მონიშვნის ველის მენიუს ელემენტებს, რადიო ღილაკების მენიუს ელემენტებს, რადიოს ღილაკების ჯგუფებს და ქვემენიუებს.

მეორეს მხრივ, Bootstrap-ის ჩამოსაშლელი ფაილები შექმნილია როგორც ზოგადი და გამოსაყენებელი სხვადასხვა სიტუაციებისა და მარკირების სტრუქტურებისთვის. მაგალითად, შესაძლებელია ჩამოსაშლელი ფანჯრების შექმნა, რომლებიც შეიცავენ დამატებით შენატანს და ფორმის კონტროლს, როგორიცაა საძიებო ველები ან შესვლის ფორმები. ამ მიზეზით, Bootstrap არ მოელის (არც ავტომატურად დაამატებს) რომელიმე ატრიბუტს role, aria-რომელიც საჭიროა ნამდვილი ARIA მენიუსთვის. ავტორებმა თავად უნდა შეიტანონ ეს უფრო კონკრეტული ატრიბუტები.

თუმცა, Bootstrap ამატებს ჩაშენებულ მხარდაჭერას კლავიატურის მენიუს უმეტესი სტანდარტული ურთიერთქმედებისთვის, როგორიცაა ცალკეულ .dropdown-itemელემენტებში გადაადგილების შესაძლებლობა კურსორის ღილაკების გამოყენებით და მენიუს დახურვა ღილაკით ESC.

მაგალითები

ჩაალაგეთ ჩამოსაშლელი გადამრთველი (თქვენი ღილაკი ან ბმული) და ჩამოსაშლელი მენიუ შიგნით .dropdownან სხვა ელემენტში, რომელიც აცხადებს position: relative;. ჩამოსაშლელი ღილაკები შეიძლება გააქტიურდეს <a>ან <button>ელემენტებიდან, რათა უკეთ მოერგოს თქვენს პოტენციურ საჭიროებებს.

ერთი ღილაკი

ნებისმიერი სინგლი .btnშეიძლება გადაიზარდოს ჩამოსაშლელ გადამრთველად გარკვეული მარკირების ცვლილებებით. აი, როგორ შეგიძლიათ მათი მუშაობა რომელიმე <button>ელემენტთან:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

და <a>ელემენტებით:

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

საუკეთესო ნაწილი ის არის, რომ ამის გაკეთება შეგიძლიათ ნებისმიერი ღილაკის ვარიანტით, ასევე:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

გაყოფის ღილაკი

ანალოგიურად, შექმენით გაყოფილი ღილაკების ჩამოსაშლელები ფაქტობრივად იგივე მარკირებით, როგორც ერთი ღილაკის ჩამოსაშლელი ღილაკები, მაგრამ .dropdown-toggle-splitჩასაშლელი კარტის ირგვლივ სათანადო ინტერვალის დამატებით.

ჩვენ ვიყენებთ ამ დამატებით კლასს, რათა შევამციროთ ჰორიზონტალური paddingზოლის ორივე მხარეს 25%-ით და წავშალოთ ის, margin-leftრაც დამატებულია ღილაკების რეგულარული ჩამოსაშლელებისთვის. ეს დამატებითი ცვლილებები ინარჩუნებს კარტს ორიენტირებული გაყოფის ღილაკზე და უზრუნველყოფს უფრო სათანადო ზომის დარტყმის ზონას მთავარი ღილაკის გვერდით.

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

გაზომვა

ღილაკების ჩამოსაშლელები მუშაობს ყველა ზომის ღილაკებით, ნაგულისხმევი და გაყოფილი ჩამოსაშლელი ღილაკების ჩათვლით.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

მიმართულებები

ჩაშვება

ელემენტების ზემოთ ჩამოსაშლელი მენიუების ჩართვა .dropupმშობელ ელემენტში დამატებით.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

წვეთოვანი

ჩართეთ ჩამოსაშლელი მენიუები ელემენტების მარჯვნივ, .droprightმშობელ ელემენტზე დამატებით.

<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropleft

ჩართეთ ჩამოსაშლელი მენიუები ელემენტების მარცხნივ, .dropleftმშობელ ელემენტზე დამატებით.

<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

ისტორიულად ჩამოსაშლელი მენიუს შიგთავსი უნდა იყოს ბმულები, მაგრამ ეს აღარ არის საქმე v4-ში. ახლა თქვენ შეგიძლიათ სურვილისამებრ გამოიყენოთ <button>ელემენტები თქვენს ჩამოსაშლელ სიაში მხოლოდ <a>s-ის ნაცვლად.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

თქვენ ასევე შეგიძლიათ შექმნათ არაინტერაქტიული ჩამოსაშლელი ელემენტები .dropdown-item-text. მოგერიდებათ შემდგომი სტილი CSS-ის ან ტექსტური საშუალებების გამოყენებით.

<div class="dropdown-menu">
  <span class="dropdown-item-text">Dropdown item text</span>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
</div>

აქტიური

დაამატეთ .activeერთეულებს ჩამოსაშლელ სიაში, რათა გაააქტიუროთ ისინი .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

გამორთულია

დაამატეთ .disabledერთეულებს ჩამოსაშლელ სიაში, რათა სტილი გამორთული იყოს .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

ნაგულისხმევად, ჩამოსაშლელი მენიუ ავტომატურად განლაგებულია 100%-ით ზემოდან და მისი მშობლის მარცხენა მხარეს. დაამატეთ .dropdown-menu-righta- .dropdown-menuში მარჯვნივ გასწორება ჩამოსაშლელი მენიუში.

Თავები მაღლა! ჩამოსაშლელი ფაილები განლაგებულია Popper.js-ის წყალობით (გარდა იმ შემთხვევებისა, როდესაც ისინი შეიცავს navbar-ში).

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

სათაურები

დაამატეთ სათაური მოქმედებების სექციების ლეიბლისთვის ნებისმიერ ჩამოსაშლელ მენიუში.

<div class="dropdown-menu">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
</div>

გამყოფები

გამოყავით დაკავშირებული მენიუს ელემენტების ჯგუფები გამყოფით.

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>

ტექსტი

განათავსეთ ნებისმიერი თავისუფალი ფორმის ტექსტი ჩამოსაშლელ მენიუში ტექსტით და გამოიყენეთ ინტერვალის უტილიტები . გაითვალისწინეთ, რომ მენიუს სიგანის შეზღუდვისთვის, სავარაუდოდ, დაგჭირდებათ ზომის დამატებითი სტილები.

<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</div>

ფორმები

განათავსეთ ფორმა ჩამოსაშლელ მენიუში, ან გადააქციეთ ის ჩამოსაშლელ მენიუში და გამოიყენეთ ზღვრული ან padding უტილიტები , რომ მისცეთ მას თქვენთვის საჭირო უარყოფითი სივრცე.

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck">
      <label class="form-check-label" for="dropdownCheck">
        Remember me
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>
<form class="dropdown-menu p-4">
  <div class="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="dropdownCheck2">
    <label class="form-check-label" for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

გამოიყენეთ data-offsetან data-referenceშეცვალეთ ჩამოსაშლელი მენიუ.

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

გამოყენება

მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით, ჩამოსაშლელი დანამატი გადართავს ფარულ შინაარსს (ჩამოშლელ მენიუებს) .showკლასის გადართვით მშობელი სიის ელემენტზე. data-toggle="dropdown"ატრიბუტს ეყრდნობა ჩამოსაშლელი მენიუების დახურვისთვის აპლიკაციის დონეზე, ამიტომ კარგი იდეაა მისი ყოველთვის გამოყენება .

შეხებით ჩართულ მოწყობილობებზე, ჩამოსაშლელი მენიუს გახსნა ელემენტის უშუალო შვილებს ემატება ცარიელი ( $.noop) დამმუშავებლები. ეს, რა თქმა უნდა, მახინჯი ჰაკი აუცილებელია iOS-ის ღონისძიების დელეგაციაში უხერხულობის აღმოსაფხვრელად , რაც სხვაგვარად ხელს შეუშლის ჩამოსაშლელი მენიუს მიღმა შეხებას კოდის გააქტიურებისგან, რომელიც ხურავს ჩამოსაშლელს. ჩამოსაშლელი მენიუს დახურვის შემდეგ, ეს დამატებითი ცარიელი დამმუშავებლები წაიშლება.mouseover<body>mouseover

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

დაამატეთ data-toggle="dropdown"ბმულზე ან ღილაკზე ჩამოსაშლელი მენიუს გადასართავად.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

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

გამოიძახეთ ჩამოსაშლელები JavaScript-ით:

$('.dropdown-toggle').dropdown()
data-toggle="dropdown"ჯერ კიდევ საჭიროა

განურჩევლად იმისა, გამოიძახებთ თუ არა თქვენს ჩამოსაშლელს JavaScript-ის საშუალებით, თუ სანაცვლოდ იყენებთ data-api-ს, data-toggle="dropdown"ყოველთვის საჭიროა ჩამოსაშლელი ტრიგერის ელემენტზე ყოფნა.

Პარამეტრები

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

სახელი ტიპი ნაგულისხმევი აღწერა
ოფსეტური ნომერი | სიმებიანი | ფუნქცია 0 ჩამოსაშლელი ჩანაწერის ოფსეტური მიზანთან შედარებით. დამატებითი ინფორმაციისთვის იხილეთ Popper.js-ის ოფსეტური დოკუმენტები .
გადახვევა ლოგიკური მართალია ნება მიეცით ჩამოსაშლელ მენიუს გადატრიალდეს საცნობარო ელემენტზე გადახურვის შემთხვევაში. დამატებითი ინფორმაციისთვის იხილეთ Popper.js-ის Flip Docs .
საზღვარი სიმებიანი | ელემენტი 'scrollParent' ჩამოსაშლელი მენიუს გადინების შეზღუდვის საზღვარი. იღებს 'viewport', 'window', 'scrollParent', ან HTMLElement მითითების მნიშვნელობებს (მხოლოდ JavaScript). დამატებითი ინფორმაციისთვის იხილეთ Popper.js-ის preventOverflow docs .
მითითება სიმებიანი | ელემენტი "გადართვა" ჩამოსაშლელი მენიუს საცნობარო ელემენტი. იღებს 'toggle', 'parent', ან HTMLElement მითითების მნიშვნელობებს. დამატებითი ინფორმაციისთვის იხილეთ Popper.js-ის referenceObject docs .
ჩვენება სიმებიანი "დინამიური" ნაგულისხმევად, ჩვენ ვიყენებთ Popper.js-ს დინამიური პოზიციონირებისთვის. გამორთეთ ეს static.

გაითვალისწინეთ, როდესაც boundaryდაყენებულია სხვა მნიშვნელობაზე, გარდა 'scrollParent', სტილი position: staticგამოიყენება .dropdownკონტეინერზე.

მეთოდები

მეთოდი აღწერა
$().dropdown('toggle') გადართავს ჩამოსაშლელ მენიუს მოცემული ნავიგაციის ზოლის ან ჩანართებით ნავიგაციის.
$().dropdown('update') განაახლებს ელემენტის ჩამოსაშლელი ფანჯრის პოზიციას.
$().dropdown('dispose') ანადგურებს ელემენტის ჩამოშლას.

Ივენთი

ყველა ჩამოსაშლელი მოვლენა გაშვებულია .dropdown-menu'-ის მშობელ ელემენტზე და აქვს relatedTargetთვისება, რომლის მნიშვნელობა არის გადართვის წამყვანი ელემენტი. hide.bs.dropdownდა hidden.bs.dropdownმოვლენებს აქვთ clickEventთვისება (მხოლოდ მაშინ, როდესაც ორიგინალური მოვლენის ტიპია click), რომელიც შეიცავს მოვლენის ობიექტს დაწკაპუნების მოვლენისთვის.

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