Равзанаҳои афтанда

Ҷойгиркунии қабатҳои контекстӣ барои намоиши рӯйхати истинодҳо ва ғайра бо плагини афтанда Bootstrap.

Барраси

Равандҳои афтанда ивазшаванда, қабатҳои контекстӣ барои намоиши рӯйхати истинодҳо ва ғайра мебошанд. Онҳо бо плагини афтанда JavaScript бо Bootstrap интерактивӣ сохта шудаанд. Онҳо бо пахшкунӣ иваз карда мешаванд, на бо гузоштан; Ин тасмими тарҳрезии қасдан аст.

Равзанаҳои афтанда дар китобхонаи тарафи сеюм, Popper.js сохта шудаанд , ки мавқеъгирии динамикӣ ва муайянкунии намоишро таъмин мекунад. Боварӣ ҳосил кунед, ки popper.min.js -ро пеш аз JavaScript-и Bootstrap дохил кунед ё bootstrap.bundle.min.js/ bootstrap.bundle.jsки Popper.js -ро истифода баред. Popper.js барои ҷойгиркунии афтандаҳо дар наворҳо истифода намешавад, гарчанде ки мавқеъгирии динамикӣ талаб карда намешавад.

Агар шумо 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ба элементи волидайн триггер кунед.

<!-- 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="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Бо нобаёнӣ, менюи афтанда ба таври худкор 100% аз боло ва дар тарафи чапи волидайн ҷойгир карда мешавад. Илова .dropdown-menu-rightба a .dropdown-menuба рост мувофиқ кардани менюи афтанда.

Сарҳо боло! Растаниҳои афтанда ба шарофати Popper.js ҷойгир карда мешаванд (ба истиснои ҳолатҳое, ки онҳо дар навор ҷойгиранд).

<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>

Ҳамоҳангсозии ҷавобӣ

Агар шумо хоҳед, ки ҳамоҳангсозии ҷавобиро истифода баред, мавқеъгирии динамикӣ бо илова кардани атрибутро ғайрифаъол кунед data-display="static"ва синфҳои вариантҳои ҷавобиро истифода баред.

Барои мувофиқ кардани рости менюи афтанда бо нуқтаи додашуда ё калонтар, илова кунед .dropdown-menu{-sm|-md|-lg|-xl}-right.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-lg-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>

Барои мувофиқ кардани менюи чапи.dropdown-menu-right афтанда бо нуқтаи додашуда ё калонтар, ва илова кунед .dropdown-menu{-sm|-md|-lg|-xl}-left.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
    <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>

Дар хотир доред, ки ба шумо лозим нест, ки ба тугмаҳои афтанда дар наворҳо атрибут илова кунед data-display="static", зеро Popper.js дар наворҳо истифода намешавад.

Сарлавҳаҳо

Барои нишон додани бахшҳои амалҳо дар ҳама гуна менюи афтанда сарлавҳа илова кунед.

<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>

Шаклҳо

Форматро дар дохили менюи афтанда ҷойгир кунед ё онро ба менюи афтанда созед ва аз маржа ё утилитаҳои пуркунӣ истифода баред , то ба он фазои манфии лозимиро диҳед.

<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-group">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </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-group">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck2">
      <label class="form-check-label" for="dropdownCheck2">
        Remember me
      </label>
    </div>
  </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) mouseoverба кӯдакони бевоситаи <body>элемент илова мекунад. Ин хаки ба таври возеҳ зишт барои кор кардан дар атрофи ҳайат дар чорабиниҳои iOS зарур аст , ки дар акси ҳол ламсро дар ҳама ҷо берун аз афтанда аз ангезиши коди пӯшидаи афтанда пешгирӣ мекунад. Пас аз баста шудани афтанда, ин 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 муроҷиат кунед .
сарҳад	сатр \| элемент	'scrollParent'	Сарҳади маҳдудияти пур аз менюи афтанда. Қиматҳои `'viewport'`, `'window'`, `'scrollParent'`, ё истинодҳои HTMLElementро қабул мекунад (танҳо JavaScript). Барои маълумоти бештар ба Docs preventOverflow Popper.js муроҷиат кунед .
истинод	сатр \| элемент	'гузариш'	Унсури истинод аз менюи афтанда. Қиматҳои `'toggle'`, `'parent'`, ё истинодҳои HTMLElement -ро қабул мекунад. Барои маълумоти бештар ба ҳуҷҷатҳои ReferenceObject Popper.js муроҷиат кунед.
намоиш	сатр	'динамикӣ'	Бо нобаёнӣ, мо Popper.js-ро барои ҷойгиркунии динамикӣ истифода мебарем. Инро бо `static`.

Аҳамият диҳед, ки вақте boundaryки ба ягон арзиши ғайр аз - муқаррар карда мешавад 'scrollParent', услуб position: staticба .dropdownконтейнер татбиқ карда мешавад.

Усулҳо

Усул	Тавсифи
`$().dropdown('toggle')`	Менюи афтанда дар навор ё паймоиши ҷадвалбандиҳоро иваз мекунад.
`$().dropdown('show')`	Менюи афтанда панели навор ё паймоиши ҷадвалбандиҳоро нишон медиҳад.
`$().dropdown('hide')`	Менюи афтанда дар навор ё паймоиши ҷадвалбандиҳоро пинҳон мекунад.
`$().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…
})

Равзанаҳои афтанда

Барраси

Дастрасӣ

Мисолхо

Тугмаи ягона

Тугмаи тақсим

Андоза

Роҳнамо

Таркиб

Рост

Тарки чап

Унсурҳои меню

Фаъол

Маъюб

Ҳамоҳангсозии меню

Ҳамоҳангсозии ҷавобӣ

Мазмуни меню

Сарлавҳаҳо

Тақсимкунандагон

Матн

Шаклҳо

Истифода

Тавассути атрибутҳои додаҳо

Тавассути JavaScript

`data-toggle="dropdown"`хануз талаб карда мешавад

Имконот

Усулҳо

Ҳодисаҳо

Равзанаҳои афтанда

Барраси

Дастрасӣ

Мисолхо

Тугмаи ягона

Тугмаи тақсим

Андоза

Роҳнамо

Таркиб

Рост

Тарки чап

Унсурҳои меню

Фаъол

Маъюб

Ҳамоҳангсозии меню

Ҳамоҳангсозии ҷавобӣ

Мазмуни меню

Сарлавҳаҳо

Сарлавҳаи афтанда

Тақсимкунандагон

Матн

Шаклҳо

Имконоти афтанда

Истифода

Тавассути атрибутҳои додаҳо

Тавассути JavaScript

data-toggle="dropdown"хануз талаб карда мешавад

Имконот

Усулҳо

Ҳодисаҳо

`data-toggle="dropdown"`хануз талаб карда мешавад