Source

Ochiladigan menyular

Bootstrap ochiladigan plagin yordamida havolalar roʻyxatini va boshqalarni koʻrsatish uchun kontekstli qoplamalarni oʻchirib qoʻying.

Umumiy koʻrinish

Ochiladigan menyular o'zgaruvchan, havolalar ro'yxatini ko'rsatish uchun kontekstli qoplamalar va boshqalar. Ular kiritilgan Bootstrap ochiladigan JavaScript plagini bilan interaktiv qilingan. Ular kursorni bosish orqali emas, balki bosish orqali almashtiriladi; Bu qasddan qilingan dizayn qarori .

Ochiladigan menyular Popper.js uchinchi tomon kutubxonasida qurilgan bo'lib , u dinamik joylashishni aniqlash va ko'rish maydonini aniqlash imkonini beradi. Bootstrap-ning JavaScript-dan oldin popper.min.js -ni qo'shganingizga ishonch hosil qiling yoki Popper.js bootstrap.bundle.min.js- dan foydalaning bootstrap.bundle.js. Popper.js navigatsiya panellarida ochiladigan menyularni joylashtirish uchun ishlatilmaydi, ammo dinamik joylashishni aniqlash shart emas.

Agar siz bizning JavaScript-ni manbadan yaratayotgan bo'lsangiz, u talab qiladiutil.js .

Foydalanish imkoniyati

WAI ARIArole="menu" standarti haqiqiy vidjetni belgilaydi , ammo bu amallar yoki funksiyalarni ishga tushiradigan dasturga o'xshash menyularga xosdir. ARIA menyularida faqat menyu elementlari, katakcha menyusi elementlari, radio tugmalar menyusi elementlari, radio tugmalar guruhlari va pastki menyular bo'lishi mumkin.

Boshqa tomondan, Bootstrap-ning ochiladigan ro'yxatlari umumiy bo'lishi va turli vaziyatlar va belgilash tuzilmalari uchun qo'llanilishi uchun mo'ljallangan. Masalan, qidiruv maydonlari yoki kirish shakllari kabi qo'shimcha kirishlar va shakl boshqaruvlarini o'z ichiga olgan ochiladigan menyularni yaratish mumkin. Shu sababli, Bootstrap haqiqiy ARIA menyulari uchun zarur bo'lgan roleva aria-atributlardan hech birini kutmaydi (va avtomatik ravishda qo'shmaydi) . Mualliflar ushbu aniqroq atributlarni o'zlari kiritishlari kerak.

Biroq, Bootstrap ko'pgina standart klaviatura menyusi o'zaro ta'sirlari uchun o'rnatilgan yordamni qo'shadi, masalan, .dropdown-itemkursor tugmachalari yordamida alohida elementlar bo'ylab harakatlanish va menyuni tugma bilan yopish qobiliyati ESC.

Misollar

Ochilish tugmachasini (tugmangiz yoki havolangiz) va ochiladigan menyuni .dropdownyoki ni e'lon qiladigan boshqa elementni o'rang position: relative;. Potensial ehtiyojlaringizni yaxshiroq qondirish uchun ochiladigan menyular <a>yoki elementlardan ishga tushirilishi mumkin .<button>

Yagona tugma

Har qanday singl .btnba'zi belgilash o'zgarishlari bilan ochiladigan menyuga aylantirilishi mumkin. <button>Ularni ikkala element bilan ishlashga qanday qo'yishingiz mumkin :

Action Another action Something else here 
<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>

Va <a>elementlar bilan:

Action Another action Something else here 
<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>

Eng yaxshi tomoni shundaki, siz buni istalgan tugma varianti bilan ham qilishingiz mumkin:

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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>

Ajratish tugmasi

Xuddi shunday, ochiladigan ochiladigan tugmachalarni bir xil tugmachalar bilan deyarli bir xil belgilar bilan, lekin .dropdown-toggle-splitochiladigan karet atrofida to'g'ri bo'sh joy uchun qo'shilgan holda yarating.

paddingBiz karetaning har ikki tomonidagi gorizontalni 25% ga qisqartirish va margin-leftoddiy ochiladigan tugmalar uchun qo'shilganlarni olib tashlash uchun ushbu qo'shimcha sinfdan foydalanamiz. Ushbu qo'shimcha o'zgarishlar karetni ajratish tugmachasining markazida ushlab turadi va asosiy tugma yonida yanada mosroq o'lchamdagi urish maydonini ta'minlaydi.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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>

Hajmi

Ochiladigan tugmachalar barcha o'lchamdagi tugmalar bilan ishlaydi, shu jumladan standart va ajratilgan ochiladigan tugmalar.

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

Yo'nalishlar

Ochilish

.dropupAsosiy elementga qo'shish orqali elementlar ustidagi ochiladigan menyularni ishga tushiring.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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

.droprightAsosiy elementga qo'shish orqali elementlarning o'ng tomonidagi ochiladigan menyularni ishga tushiring .

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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>

Chap tomonda

.dropleftAsosiy elementga qo'shish orqali elementlarning chap tomonidagi ochiladigan menyularni ishga tushiring .

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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>

Tarixiy ravishda ochiladigan menyu mazmuni havolalar bo'lishi kerak edi , lekin bu endi v4 bilan emas. Endi siz ixtiyoriy ravishda ochiladigan menyuda faqat s <button>o'rniga elementlardan foydalanishingiz mumkin.<a>

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

Bundan tashqari, bilan interaktiv bo'lmagan ochiladigan elementlarni yaratishingiz mumkin .dropdown-item-text. Maxsus CSS yoki matn yordam dasturlari yordamida uslubni yanada qulayroq qiling.

Ochiladigan element matni Harakat Yana bir harakat Bu yerda boshqa narsa 
<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>

Faol

.activeOchiladigan menyudagi elementlarga qo'shing va ularni faol deb belgilang .

Oddiy havola Faol havola Boshqa havola 
<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>

O'chirilgan

.disabledOchiladigan ro'yxatdagi elementlarga qo'shing , ularni o'chirib qo'ying .

Oddiy havola O'chirilgan havola Boshqa havola 
<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>

Odatiy bo'lib, ochiladigan menyu avtomatik ravishda ota-onasining yuqori qismidan 100% va chap tomonida joylashgan. Ochiladigan .dropdown-menu-rightmenyuni .dropdown-menuo'ngga tekislang.

Oldindan qisqa ma'lumot berish! Ochiladigan menyular Popper.js tufayli joylashtiriladi (ular navigatsiya panelida bo'lmaganidan tashqari).

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

Javobgar tekislash

Agar javob beruvchi hizalamadan foydalanmoqchi bo'lsangiz, atributni qo'shish orqali dinamik joylashishni aniqlashni o'chiring data-display="static"va sezgir o'zgaruvchanlik sinflaridan foydalaning.

Ochiladigan menyuni berilgan to'xtash nuqtasi yoki undan kattaroq o'ngga tekislash uchun qo'shing .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>

Chap ochiladigan menyuni berilgan to'xtash nuqtasi yoki undan kattaroq bilan tekislash uchun .dropdown-menu-rightva qo'shing .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>

Esda tutingki, navigatsiya panelidagi ochiladigan tugmalarga atribut qo‘shish shart emas data-display="static", chunki Popper.js navigatsiya panellarida ishlatilmaydi.

Menyu tarkibi

Sarlavhalar

Har qanday ochiladigan menyuda harakatlar bo'limlarini belgilash uchun sarlavha qo'shing.

Ochiladigan sarlavha
Harakat Yana bir harakat 
<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>

Ajratuvchilar

Tegishli menyu elementlarini ajratuvchi bilan ajrating.

Harakat Yana bir harakat Bu yerda boshqa narsa
Ajratilgan havola 
<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>

Matn

Erkin shakldagi har qanday matnni matnli ochiladigan menyuga joylashtiring va intervalli yordam dasturlaridan foydalaning . Menyu kengligini cheklash uchun sizga qo'shimcha o'lcham uslublari kerak bo'lishi mumkinligini unutmang.

Ochiladigan menyuda erkin harakatlanadigan ba'zi misol matni.

Va bu ko'proq misol matn.

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

Shakllar

Shaklni ochiladigan menyuga qo'ying yoki uni ochiladigan menyuga aylantiring va unga kerakli salbiy bo'sh joy berish uchun chekka yoki to'ldirish yordam dasturlaridan foydalaning.

Bu yerda yangimi? Ro'yxatdan o'tish Parolni unutdingizmi? 
<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>

Ochiladigan ro'yxatning joylashuvini o'zgartirish uchun data-offsetyoki dan foydalaning .data-reference

Action Another action Something else here
Action Another action Something else here
Separated link 
<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>

Foydalanish

.showMa'lumotlar atributlari yoki JavaScript orqali ochiladigan plagin asosiy ro'yxat elementidagi sinfni almashtirish orqali yashirin tarkibni (ochiladigan menyular) almashtiradi . Atribut data-toggle="dropdown"ilova darajasida ochiladigan menyularni yopish uchun ishlatiladi, shuning uchun uni har doim ishlatish yaxshi fikr.

Sensorli qurilmalarda ochiladigan menyuni ochish elementning bevosita bolalariga bo'sh ( $.noop) ishlov beruvchilarni qo'shadi. Bu, shubhasiz, xunuk buzg'unchilik iOS-ning tadbirlar delegatsiyasidagi g'alati muammoni hal qilish uchun zarur bo'lib, aks holda ochiladigan menyudan tashqaridagi istalgan joyga teginish ochiladigan menyuni yopuvchi kodni ishga tushirishiga yo'l qo'ymaydi. Ochiladigan menyu yopilgach, ushbu qo'shimcha bo'sh ishlov beruvchilar o'chiriladi.mouseover<body>mouseover

Ma'lumotlar atributlari orqali

data-toggle="dropdown"Ochiladigan menyuni almashtirish uchun havola yoki tugmaga qo'shing .

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

JavaScript orqali ochiladigan menyularga qo'ng'iroq qiling:

$('.dropdown-toggle').dropdown()
data-toggle="dropdown"hali ham talab qilinadi

Ochiladigan menyuga JavaScript orqali qo'ng'iroq qilishingiz yoki uning o'rniga data-api dan foydalanmasligingizdan qat'i nazar, data-toggle="dropdown"har doim ochiladigan menyuning tetik elementida bo'lish talab qilinadi.

Variantlar

Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-kabi qoʻshing data-offset="".

Ism Turi Standart Tavsif
ofset raqam | string | funktsiyasi 0

Ochiladigan ro'yxatning maqsadiga nisbatan ofset.

Ofsetni aniqlash uchun funktsiyadan foydalanilganda, u birinchi argument sifatida ofset ma'lumotlarini o'z ichiga olgan ob'ekt bilan chaqiriladi. Funktsiya bir xil tuzilishga ega ob'ektni qaytarishi kerak. DOM tugunining ishga tushiruvchi elementi ikkinchi argument sifatida uzatiladi.

Qo'shimcha ma'lumot olish uchun Popper.js ofset hujjatlariga qarang .
aylantirmoq mantiqiy rost Agar mos yozuvlar elementi bir-biriga o‘xshab qolsa, ochiladigan menyuni aylantirishga ruxsat bering. Qo'shimcha ma'lumot olish uchun Popper.js ning flip docs ga qarang .
chegara string | element 'scrollParent' Ochiladigan menyuning to'lib ketish cheklovi chegarasi. 'viewport', 'window', 'scrollParent', yoki HTMLElement havolasi qiymatlarini qabul qiladi (faqat JavaScript). Qo'shimcha ma'lumot olish uchun Popper.js'ning preventOverflow hujjatlariga qarang .
ma'lumotnoma string | element "o'tish" Ochiladigan menyuning mos yozuvlar elementi. 'toggle', 'parent'yoki HTMLElement havolasi qiymatlarini qabul qiladi . Qo'shimcha ma'lumot olish uchun Popper.js's referenceObject docs ga qarang .
ko'rsatish ip "dinamik" Odatiy bo'lib, biz dinamik joylashishni aniqlash uchun Popper.js dan foydalanamiz. Buni bilan o'chirib qo'ying static.
popperConfig null | ob'ekt null Bootstrap standart Popper.js konfiguratsiyasini o‘zgartirish uchun Popper.js konfiguratsiyasiga qarang .

E'tibor bering, qachon boundaryboshqa qiymatga o'rnatilgan bo'lsa 'scrollParent', uslub konteynerga position: staticqo'llaniladi ..dropdown

Usullari

Usul Tavsif
$().dropdown('toggle') Berilgan navigatsiya paneli yoki yorliqli navigatsiyaning ochiladigan menyusini almashtiradi.
$().dropdown('show') Berilgan navigatsiya paneli yoki yorliqli navigatsiyaning ochiladigan menyusini ko'rsatadi.
$().dropdown('hide') Berilgan navigatsiya paneli yoki yorliqli navigatsiyaning ochiladigan menyusini yashiradi.
$().dropdown('update') Elementning ochiladigan ro'yxatining o'rnini yangilaydi.
$().dropdown('dispose') Elementning ochiladigan ro'yxatini yo'q qiladi.

Voqealar

Barcha ochiladigan hodisalar .dropdown-menu'ning asosiy elementida ishga tushiriladi va relatedTargetqiymati o'zgaruvchan langar elementi bo'lgan xususiyatga ega. hide.bs.dropdownva hidden.bs.dropdownhodisalar bosish hodisasi uchun Hodisa ob'ektini o'z ichiga olgan clickEventxususiyatga ega (faqat asl hodisa turi bo'lsa ).click

Tadbir Tavsif
show.bs.dropdown Bu hodisa shou namunasi usuli chaqirilganda darhol ishga tushadi.
shown.bs.dropdown Ushbu hodisa ochiladigan ro'yxat foydalanuvchiga ko'rinadigan holga keltirilgach, ishga tushiriladi (CSS o'tishlari tugashini kutadi).
hide.bs.dropdown Hide misol usuli chaqirilganda, bu hodisa darhol ishga tushiriladi.
hidden.bs.dropdown Ushbu hodisa ochiladigan ro'yxatni foydalanuvchidan yashirishni tugatgandan so'ng boshlanadi (CSS o'tishlari tugashini kutadi). 
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something...
})