Унтраах цэсүүд

Bootstrap унадаг залгаасыг ашиглан холбоосын жагсаалт болон бусад зүйлийг харуулах контекст давхаргыг сэлгэх.

Тойм

Унтраах цэсүүд нь сэлгэх боломжтой, холбоосын жагсаалт болон бусад зүйлсийг харуулах контекст давхаргууд юм. Тэдгээрийг оруулсан Bootstrap унадаг JavaScript залгаастай интерактив болгосон. Тэдгээрийг зөөвөрлөх замаар биш харин товших замаар сэлгэх боломжтой; Энэ бол санаатай дизайны шийдвэр юм.

Унтраах цэсүүд нь динамик байрлал тогтоох, харах талбар илрүүлэх боломжийг олгодог гуравдагч талын Поппер номын сан дээр бүтээгдсэн . Bootstrap-н JavaScript-н өмнө popper.min.js оруулах эсвэл Поппер агуулсан bootstrap.bundle.min.js/ ашиглахаа мартуузай . bootstrap.bundle.jsПоппер нь динамик байршлыг тогтоох шаардлагагүй тул унадаг цэсийг navbars-д байрлуулахад ашигладаггүй.

Хэрэв та манай JavaScript-г эх сурвалжаас бүтээж байгаа болutil.js .

Хүртээмжтэй байдал

WAI ARIA стандарт нь бодит виджетийг role="menu"тодорхойлдог боловч энэ нь үйлдэл эсвэл функцийг идэвхжүүлдэг програмтай төстэй цэсүүдэд зориулагдсан юм. ARIA цэс нь зөвхөн цэсийн зүйл, шалгах хайрцагны цэсийн зүйл, радио товчлуурын цэсийн зүйл, радио товчлуурын бүлгүүд болон дэд цэсүүдийг агуулж болно.

Нөгөө талаас Bootstrap-ийн уналт нь ерөнхий байхаар бүтээгдсэн бөгөөд янз бүрийн нөхцөл байдал, тэмдэглэгээний бүтцэд хэрэглэгдэх боломжтой. Жишээлбэл, хайлтын талбар эсвэл нэвтрэх маягт гэх мэт нэмэлт оролт, маягтын удирдлагыг агуулсан унадаг цэсүүдийг үүсгэх боломжтой. Ийм учраас Bootstrap нь жинхэнэ ARIA цэсэнд шаардлагатай шинж чанаруудын аль нэгийг нь хүлээхгүй ( roleмөн автоматаар нэмдэггүй). Зохиогчид эдгээр илүү тодорхой шинж чанаруудыг өөрсдөө оруулах ёстой.aria-

.dropdown-itemГэсэн хэдий ч Bootstrap нь курсорын товчлууруудыг ашиглан тус тусад нь элементүүдээр шилжих, товчлуураар цэсийг хаах зэрэг гарны цэсийн ихэнх стандарт харилцан үйлчлэлд суурилуулсан дэмжлэгийг нэмдэг ESC.

Жишээ

Унждаг цонхны унтраалга (таны товчлуур эсвэл холбоос) болон унадаг цэсийг дотор нь .dropdown, эсвэл зарладаг өөр элементийг боож өгнө үү position: relative;. Таны боломжит хэрэгцээнд илүү нийцүүлэхийн тулд унадаг цэсийг <a>эсвэл элементүүдээс өдөөж болно .<button>

Ганц товчлуур

Аливаа .btnсинглыг зарим тэмдэглэгээний өөрчлөлтөөр унждаг унтраалга болгон хувиргаж болно. <button>Та тэдгээрийг аль ч элементтэй хэрхэн ажиллуулахыг эндээс үзнэ үү :

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </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>
</div>

Мөн <a>элементүүдтэй:

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

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

Хамгийн сайн тал нь та үүнийг дурын товчлуурын хувилбараар хийж болно.

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" 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-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-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-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-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-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-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-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-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-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-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">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" 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-д тийм биш болсон. Одоо та зүгээр л s <button>-ийн оронд унадаг цэсэнд элементүүдийг ашиглаж болно .<a>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu">
    <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">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Өгөгдмөл байдлаар, унждаг цэс нь эцэг эхийнхээ дээд ба зүүн талд автоматаар 100% байрладаг. Унждаг .dropdown-menu-rightцэсийг .dropdown-menuбаруун тийш зэрэгцүүлэх.

Анхаар! Унтраах цэсүүд нь Попперын ачаар байрладаг (тэдгээр нь навигацийн самбарт агуулагдахаас бусад тохиолдолд).

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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>

Хариуцлагатай тохируулга

Хэрэв та responsive alignment ашиглахыг хүсвэл атрибут нэмж динамик байршлыг идэвхгүй болгож 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-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-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"Попперыг navbar-д ашигладаггүй тул та navbars-ийн унадаг товчлууруудад атрибут нэмэх шаардлагагүйг анхаарна уу .

Гарчиг

Дурын унждаг цэсэнд үйлдлүүдийн хэсгийг шошголохын тулд толгой хэсгийг нэмнэ үү.

<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" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
      Offset
    </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>
  </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" data-toggle="dropdown" aria-expanded="false" data-reference="parent">
      <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>
</div>

Хэрэглээ

.showӨгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулан унадаг залгаас нь эцэг эх дээрх ангийг сэлгэх замаар далд агуулгыг (унтраах цэс) сэлгэдэг .dropdown-menu. Атрибут data-toggle="dropdown"нь програмын түвшинд унждаг цэсийг хаахад тулгуурладаг тул үүнийг үргэлж ашиглах нь зүйтэй.

Мэдрэгчтэй төхөөрөмжүүд дээр унадаг цэсийг нээх нь элементийн шууд хүүхдүүд рүү хоосон ( $.noop) зохицуулагчийг нэмнэ. Энэхүү муухай хакерт нь iOS-ийн арга хэмжээний төлөөлөгчдийн доторх хачирхалтай байдлыг арилгахад зайлшгүй шаардлагатай бөгөөд энэ нь унадаг цэснээс гадна хаана ч товших нь унадаг цэсийг хаадаг кодыг өдөөхөөс сэргийлнэ. Унтраах цонхыг хаасны дараа эдгээр нэмэлт хоосон зохицуулагчийг устгана. mouseover<body>mouseover

Өгөгдлийн шинж чанаруудаар дамжуулан

data-toggle="dropdown"Унждаг цэсийг сэлгэхийн тулд холбоос эсвэл товчлуур дээр нэмнэ үү .

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

JavaScript-ээр дамжуулан

JavaScript-ээр унадаг цэс рүү залгана уу:

$('.dropdown-toggle').dropdown()

`data-toggle="dropdown"`шаардлагатай хэвээр байна

Та JavaScript-ээр унадаг цэс рүү залгах эсвэл оронд нь data-api ашиглах эсэхээс үл хамааран унадаг цэсний data-toggle="dropdown"гох элемент дээр байнга байх шаардлагатай.

Сонголтууд

Сонголтуудыг өгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулж болно. Өгөгдлийн шинж чанаруудын хувьд сонголтын нэрийг -д data-хавсаргана data-offset="".

Нэр	Төрөл	Өгөгдмөл	Тодорхойлолт
офсет	тоо \| мөр \| функц	0	Зорилтоттой харьцуулахад унждаг цэсийн офсет. Функцийг офсетийг тодорхойлоход ашиглах үед түүнийг анхны аргумент болгон офсет өгөгдлийг агуулсан объектоор дууддаг. Функц нь ижил бүтэцтэй объектыг буцаах ёстой. Өдөөгч элементийн DOM зангилааг хоёр дахь аргумент болгон дамжуулна. Дэлгэрэнгүй мэдээллийг Попперын офсет баримтаас үзнэ үү .
эргүүлэх	логик	үнэн	Лавлагаа элемент дээр давхцсан тохиолдолд Dropdown-ыг эргүүлэхийг зөвшөөрнө үү. Дэлгэрэнгүй мэдээллийг Попперын флип баримтаас үзнэ үү .
хил хязгаар	мөр \| элемент	'scrollParent'	Унждаг цэсний халих хязгаарлалтын хил хязгаар. `'viewport'`, `'window'`, `'scrollParent'`, эсвэл HTMLElement лавлагааны утгуудыг (зөвхөн JavaScript) хүлээн авна. Дэлгэрэнгүй мэдээллийг Попперын preventOverflow баримтаас үзнэ үү .
лавлагаа	мөр \| элемент	'унтраах'	Унждаг цэсний лавлах элемент. `'toggle'`, `'parent'`, эсвэл HTMLElement лавлагааны утгыг хүлээн авна. Дэлгэрэнгүй мэдээллийг Попперын лавлахObject баримтаас үзнэ үү .
харуулах	мөр	"динамик"	Анхдагч байдлаар бид динамик байрлал тогтооход Попперыг ашигладаг. Үүнийг ашиглан идэвхгүй болгох `static`.
popperConfig	null \| обьект	null	Bootstrap-ийн анхдагч Popper тохиргоог өөрчлөхийн тулд Попперын тохиргоог үзнэ үү

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`	Show instance аргыг дуудах үед энэ үйл явдал шууд идэвхждэг.
`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"`шаардлагатай хэвээр байна