ເລື່ອນລົງ
ສະຫຼັບການວາງຊ້ອນຕາມບໍລິບົດເພື່ອສະແດງລາຍການລິ້ງ ແລະອື່ນໆອີກດ້ວຍ plugin dropdown Bootstrap.
ພາບລວມ
ເລື່ອນລົງແມ່ນສາມາດສະຫຼັບໄດ້, ການວາງຊ້ອນກັນຕາມບໍລິບົດເພື່ອສະແດງລາຍຊື່ຂອງລິ້ງ ແລະອື່ນໆອີກ. ພວກມັນຖືກສ້າງປະຕິສຳພັນກັບປລັກອິນ JavaScript ແບບເລື່ອນລົງຂອງ Bootstrap. ພວກມັນຖືກສະຫຼັບໂດຍການຄລິກ, ບໍ່ແມ່ນໂດຍການເລື່ອນ; ນີ້ແມ່ນ ການຕັດສິນໃຈອອກແບບໂດຍເຈດຕະນາ .
Dropdowns ຖືກສ້າງຂຶ້ນໃນຫ້ອງສະຫມຸດພາກສ່ວນທີສາມ, Popper , ເຊິ່ງສະຫນອງການຈັດຕໍາແຫນ່ງແບບເຄື່ອນໄຫວແລະການກວດສອບ viewport. ໃຫ້ແນ່ໃຈວ່າລວມເອົາ popper.min.js ກ່ອນ JavaScript ຂອງ Bootstrap ຫຼືໃຊ້ bootstrap.bundle.min.js
/ bootstrap.bundle.js
ທີ່ມີ Popper. Popper ບໍ່ໄດ້ຖືກນໍາໃຊ້ເພື່ອຈັດຕໍາແຫນ່ງ dropdowns ໃນ navbars ເຖິງແມ່ນວ່າການວາງຕໍາແຫນ່ງແບບເຄື່ອນໄຫວແມ່ນບໍ່ຈໍາເປັນ.
ການເຂົ້າເຖິງ
ມາດ ຕະ ຖານ WAI ARIA ກໍານົດ role="menu"
widget ຕົວຈິງ , ແຕ່ນີ້ແມ່ນສະເພາະກັບເມນູທີ່ຄ້າຍຄືຄໍາຮ້ອງສະຫມັກທີ່ຈະກະຕຸ້ນການປະຕິບັດຫຼືຫນ້າທີ່. ເມນູ ARIA ສາມາດມີພຽງແຕ່ລາຍການເມນູ, ລາຍການເມນູກ່ອງກາໝາຍ, ລາຍການເມນູປຸ່ມວິທະຍຸ, ກຸ່ມປຸ່ມວິທະຍຸ ແລະເມນູຍ່ອຍ.
ໃນທາງກົງກັນຂ້າມ, ການຫຼຸດລົງຂອງ Bootstrap ໄດ້ຖືກອອກແບບເພື່ອໃຫ້ເປັນແບບທົ່ວໄປແລະໃຊ້ໄດ້ກັບຫຼາຍໆສະຖານະການແລະໂຄງສ້າງເຄື່ອງຫມາຍ. ຕົວຢ່າງ, ມັນເປັນໄປໄດ້ທີ່ຈະສ້າງ dropdowns ທີ່ມີ inputs ເພີ່ມເຕີມແລະການຄວບຄຸມແບບຟອມ, ເຊັ່ນ: ຊ່ອງຄົ້ນຫາຫຼືແບບຟອມເຂົ້າສູ່ລະບົບ. ສໍາລັບເຫດຜົນນີ້, Bootstrap ບໍ່ໄດ້ຄາດຫວັງ (ຫຼືເພີ່ມອັດຕະໂນມັດ) ໃດໆ role
ແລະ aria-
ຄຸນລັກສະນະທີ່ຕ້ອງການສໍາລັບ ເມນູ ARIA ທີ່ແທ້ຈິງ. ຜູ້ຂຽນຈະຕ້ອ��ລວມເອົາຄຸນລັກສະນະສະເພາະເຫຼົ່ານີ້ດ້ວຍຕົນເອງ.
ຢ່າງໃດກໍຕາມ, Bootstrap ເພີ່ມການສະຫນັບສະຫນູນໃນຕົວສໍາລັບການໂຕ້ຕອບຂອງເມນູແປ້ນພິມມາດຕະຖານສ່ວນໃຫຍ່, ເຊັ່ນ: ຄວາມສາມາດໃນການຍ້າຍຜ່ານ .dropdown-item
ອົງປະກອບສ່ວນບຸກຄົນໂດຍໃຊ້ປຸ່ມຕົວກະພິບແລະປິດເມນູດ້ວຍ ESCປຸ່ມ.
ຕົວຢ່າງ
ຫໍ່ປິດສະຫຼັບຂອງແບບເລື່ອນລົງ (ປຸ່ມ ຫຼືລິ້ງຂອງທ່ານ) ແລະເມນູເລື່ອນລົງພາຍໃນ .dropdown
, ຫຼືອົງປະກອບອື່ນທີ່ປະກາດ position: relative;
. Dropdowns ສາມາດຖືກກະຕຸ້ນຈາກ <a>
ຫຼື <button>
ອົງປະກອບເພື່ອໃຫ້ເຫມາະສົມກັບຄວາມຕ້ອງການທີ່ເປັນໄປໄດ້ຂອງທ່ານ. ຕົວຢ່າງທີ່ສະແດງຢູ່ນີ້ໃຊ້ອົງປະກອບ semantic <ul>
ທີ່ເຫມາະສົມ, ແຕ່ເຄື່ອງຫມາຍ custom ສະຫນັບສະຫນູນ.
ປຸ່ມດຽວ
ອັນໃດອັນໜຶ່ງ .btn
ສາມາດປ່ຽນເປັນປຸ່ມສະຫຼັບແບບເລື່ອນລົງໄດ້ ໂດຍມີການປ່ຽນແປງເຄື່ອງໝາຍບາງອັນ. ນີ້ແມ່ນວິທີທີ່ເຈົ້າສາມາດເຮັດໃຫ້ພວກມັນເຮັດວຽກກັບ <button>
ອົງປະກອບທັງສອງຢ່າງ:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
ແລະມີ <a>
ອົງປະກອບ:
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
ສ່ວນທີ່ດີທີ່ສຸດແມ່ນທ່ານສາມາດເຮັດສິ່ງນີ້ກັບຕົວແປປຸ່ມໃດໆ, ເຊັ່ນກັນ:
<!-- Example single danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
ປຸ່ມແຍກ
ເຊັ່ນດຽວກັນ, ສ້າງການເລື່ອນລົງປຸ່ມທີ່ແບ່ງອອກໂດຍມີເຄື່ອງຫມາຍ virtually ຄືກັນກັບການເລື່ອນລົງປຸ່ມດຽວ, ແຕ່ມີການເພີ່ມເຕີມ .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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
ຂະໜາດ
ປຸ່ມເລື່ອນລົງເຮັດວຽກກັບປຸ່ມທຸກຂະໜາດ, ລວມທັງປຸ່ມແບບເລື່ອນລົງແບບເລີ່ມຕົ້ນ ແລະການແບ່ງປັນ.
<!-- Large button groups (default and split) -->
<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Large button
</button>
<ul class="dropdown-menu">
...
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Small button
</button>
<ul class="dropdown-menu">
...
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
ເລື່ອນລົງຊ້ໍາ
ເລືອກເຂົ້າໄປໃນແບບເລື່ອນລົງທີ່ມືດກວ່າເພື່ອໃຫ້ກົງກັບແຖບ navbar ມືດ ຫຼືຮູບແບບກຳນົດເອງໂດຍການເພີ່ມ .dropdown-menu-dark
ໃສ່ໃນທີ່ມີຢູ່ແລ້ວ .dropdown-menu
. ບໍ່ຈຳເປັນຕ້ອງມີການປ່ຽນແປງຕໍ່ກັບລາຍການແບບເລື່ອນລົງ.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
ແລະວາງມັນເພື່ອໃຊ້ໃນແຖບ navbar:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
ທິດທາງ
RTL
ທິດທາງແມ່ນສະທ້ອນເມື່ອໃຊ້ Bootstrap ໃນ RTL, ຄວາມຫມາຍ .dropstart
ຈະປາກົດຢູ່ເບື້ອງຂວາ.
ເລື່ອນລົງ
ກະຕຸ້ນເມນູແບບເລື່ອນລົງຂ້າງເທິງອົງປະກອບໂດຍການເພີ່ມ .dropup
ໃສ່ອົງປະກອບຫຼັກ.
<!-- Default dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
ຫຼົ່ນລົງ
ກະຕຸ້ນເມນູແບບເລື່ອນລົງຢູ່ເບື້ອງຂວາຂອງອົງປະກອບໂດຍການເພີ່ມ .dropend
ໃສ່ອົງປະກອບຫຼັກ.
<!-- Default dropend button -->
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropright
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
<!-- Split dropend button -->
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary">
Split dropend
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropright</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
Dropleft
ກະຕຸ້ນເມນູແບບເລື່ອນລົງທາງຊ້າຍຂອງອົງປະກອບໂດຍການເພີ່ມ .dropstart
ໃສ່ອົງປະກອບຫຼັກ.
<!-- Default dropstart button -->
<div class="btn-group dropstart">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
<!-- Split dropstart button -->
<div class="btn-group">
<div class="btn-group dropstart" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropstart</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
<button type="button" class="btn btn-secondary">
Split dropstart
</button>
</div>
ລາຍການເມນູ
ທ່ານສາມາດນໍາໃຊ້ <a>
ຫຼື <button>
ອົງປະກອບເປັນລາຍການແບບເລື່ອນລົງ.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
ນອກນັ້ນທ່ານຍັງສາມາດສ້າງລາຍການແບບເລື່ອນລົງທີ່ບໍ່ມີການໂຕ້ຕອບກັບ .dropdown-item-text
. ຮູ້ສຶກບໍ່ເສຍຄ່າທີ່ຈະຈັດຮູບແບບເພີ່ມເຕີມດ້ວຍ CSS ແບບກຳນົດເອງ ຫຼືເຄື່ອງໃຊ້ຂໍ້ຄວາມ.
<ul class="dropdown-menu">
<li><span class="dropdown-item-text">Dropdown item text</span></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
ເຄື່ອນໄຫວ
ເພີ່ມ .active
ໃສ່ລາຍການໃນລາຍການແບບເລື່ອນລົງເພື່ອຈັດ ຮູບແບບພວກມັນເປັນການເຄື່ອນໄຫວ . ເພື່ອບົ່ງບອກສະຖານະການເຄື່ອນໄຫວໃຫ້ກັບເທັກໂນໂລຍີຊ່ວຍເຫຼືອ, ໃຫ້ໃຊ້ aria-current
ຄຸນສົມບັດ — ໂດຍໃຊ້ page
ຄ່າສຳລັບໜ້າປັດຈຸບັນ ຫຼື true
ສຳລັບລາຍການປັດຈຸບັນໃນຊຸດໃດໜຶ່ງ.
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
ຄົນພິການ
ເພີ່ມ .disabled
ໃສ່ລາຍການໃນເມນູເລື່ອນລົງເພື່ອຈັດ ຮູບແບບພວກມັນເປັນປິດໃຊ້ງານ .
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
ການຈັດຮຽງເມນູ
ໂດຍຄ່າເລີ່ມຕົ້ນ, ເມນູເລື່ອນລົງຈະຖືກຈັດວາງໂດຍອັດຕະໂນມັດ 100% ຈາກດ້ານເທິງ ແລະທາງຊ້າຍຂອງພໍ່ແມ່ຂອງມັນ. ທ່ານສາມາດມີການປ່ຽນແປງນີ້ກັບ .drop*
ຫ້ອງຮຽນທິດທາງ, ແຕ່ວ່າທ່ານຍັງສາມາດຄວບຄຸມພວກເຂົາດ້ວຍຫ້ອງຮຽນການປັບປຸງເພີ່ມເຕີມ.
ຕື່ມການໃສ່ .dropdown-menu-end
ໄປ .dropdown-menu
ທາງຂວາຈັດວາງເມນູແບບເລື່ອນລົງ. ທິດທາງແມ່ນສະທ້ອນເມື່ອໃຊ້ Bootstrap ໃນ RTL, ຄວາມຫມາຍ .dropdown-menu-end
ຈະປາກົດຢູ່ເບື້ອງຊ້າຍ.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Right-aligned menu example
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
ການຈັດຕໍາແຫນ່ງທີ່ຕອບສະຫນອງ
ຖ້າທ່ານຕ້ອງການໃຊ້ການຈັດຮຽງແບບຕອບສະໜອງ, ໃຫ້ປິດການຈັດຕຳແໜ່ງແບບໄດນາມິກໂດຍການເພີ່ມ data-bs-display="static"
ຄຸນສົມບັດ ແລະໃຊ້ຫ້ອງຮຽນການປ່ຽນແປງທີ່ຕອບສະໜອງ.
ເພື່ອຈັດຮຽງ ເມນູແບບເລື່ອນລົງໃຫ້ ຖືກຕ້ອງ ກັບຈຸດແບ່ງທີ່ໃຫ້ ຫຼືໃຫຍ່ກວ່າ, ໃຫ້ເພີ່ມ .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end
.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Left-aligned but right aligned when large screen
</button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
ເພື່ອຈັດຮຽງ ຊ້າຍ ເມນູແບບເລື່ອນລົງດ້ວຍຈຸດແບ່ງທີ່ໃຫ້ ຫຼືໃຫຍ່ກວ່າ, ເພີ່ມ .dropdown-menu-end
ແລະ .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start
.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Right-aligned but left aligned when large screen
</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
ໃຫ້ສັງເກດວ່າທ່ານບໍ່ຈໍາເປັນຕ້ອງເພີ່ມ data-bs-display="static"
ຄຸນລັກສະນະຂອງປຸ່ມເລື່ອນລົງໃນແຖບ navbars, ເພາະວ່າ Popper ບໍ່ໄດ້ຖືກນໍາໃຊ້ໃນ navbars.
ຕົວເລືອກການຈັດຮຽງ
ເອົາຕົວເລືອກສ່ວນໃຫຍ່ທີ່ສະແດງຂ້າງເທິງ, ນີ້ແມ່ນຕົວຢ່າງການຫລົ້ມຈົມເຮືອນຄົວຂະຫນາດນ້ອຍຂອງທາງເລືອກການຈັດຕໍາແຫນ່ງແບບເລື່ອນລົງໃນບ່ອນດຽວ.
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Right-aligned menu
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Left-aligned, right-aligned lg
</button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Right-aligned, left-aligned lg
</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropstart">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropend
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
ເນື້ອໃນເມນູ
ສ່ວນຫົວ
ເພີ່ມສ່ວນຫົວໃສ່ປ້າຍກຳກັບພາກສ່ວນຂອງຄຳສັ່ງຢູ່ໃນເມນູແບບເລື່ອນລົງໃດໆກໍຕາມ.
<ul class="dropdown-menu">
<li><h6 class="dropdown-header">Dropdown header</h6></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
ສ່ວນແບ່ງ
ແຍກກຸ່ມຂອງລາຍການເມນູທີ່ກ່ຽວຂ້ອງດ້ວຍຕົວແບ່ງ.
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
ຂໍ້ຄວາມ
ວາງຂໍ້ຄວາມແບບບໍ່ເສຍຄ່າໃດນຶ່ງພາຍໃນເມນູແບບເລື່ອນລົງດ້ວຍຂໍ້ຄວາມ ແລະໃຊ້ເຄື່ອງມືທີ່ ມີຊ່ອງຫວ່າງ . ກະລຸນາຮັບຊາບວ່າທ່ານອາດຈະຕ້ອງການຮູບແບບຂະໜາດເພີ່ມເຕີມເພື່ອຈຳກັດຄວາມກວ້າງຂອງເມນູ.
<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="mb-3">
<label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="mb-3">
<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="mb-3">
<label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword2" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div>
<div class="mb-3">
<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-bs-offset
ຫຼື data-bs-reference
ປ່ຽນສະຖານທີ່ຂອງ dropdown ໄດ້.
<div class="d-flex">
<div class="dropdown me-1">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
Offset
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</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-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
ພຶດຕິກໍາການປິດອັດຕະໂນມັດ
ໂດຍຄ່າເລີ່ມຕົ້ນ, ເມນູແບບເລື່ອນລົງຈະຖືກປິດເມື່ອຄລິກໃສ່ພາຍໃນຫຼືພາຍນອກເມນູແບບເລື່ອນລົງ. ທ່ານສາມາດນໍາໃຊ້ autoClose
ທາງເລືອກໃນການປ່ຽນແປງພຶດຕິກໍາຂອງ dropdown ນີ້.
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
Default dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="defaultDropdown">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
Clickable outside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Clickable inside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
Manual close
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
ຊາສ
ຕົວແປ
ຕົວແປສຳລັບການເລື່ອນລົງທັງໝົດ:
$dropdown-min-width: 10rem;
$dropdown-padding-x: 0;
$dropdown-padding-y: .5rem;
$dropdown-spacer: .125rem;
$dropdown-font-size: $font-size-base;
$dropdown-color: $body-color;
$dropdown-bg: $white;
$dropdown-border-color: rgba($black, .15);
$dropdown-border-radius: $border-radius;
$dropdown-border-width: $border-width;
$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg: $dropdown-border-color;
$dropdown-divider-margin-y: $spacer * .5;
$dropdown-box-shadow: $box-shadow;
$dropdown-link-color: $gray-900;
$dropdown-link-hover-color: shade-color($gray-900, 10%);
$dropdown-link-hover-bg: $gray-200;
$dropdown-link-active-color: $component-active-color;
$dropdown-link-active-bg: $component-active-bg;
$dropdown-link-disabled-color: $gray-500;
$dropdown-item-padding-y: $spacer * .25;
$dropdown-item-padding-x: $spacer;
$dropdown-header-color: $gray-600;
$dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x;
ຕົວແປສໍາລັບການ ເລື່ອນລົງຊ້ໍາ :
$dropdown-dark-color: $gray-300;
$dropdown-dark-bg: $gray-800;
$dropdown-dark-border-color: $dropdown-border-color;
$dropdown-dark-divider-bg: $dropdown-divider-bg;
$dropdown-dark-box-shadow: null;
$dropdown-dark-link-color: $dropdown-dark-color;
$dropdown-dark-link-hover-color: $white;
$dropdown-dark-link-hover-bg: rgba($white, .15);
$dropdown-dark-link-active-color: $dropdown-link-active-color;
$dropdown-dark-link-active-bg: $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color: $gray-500;
ຕົວແປສໍາລັບ CSS-based carets ທີ່ຊີ້ໃຫ້ເຫັນການໂຕ້ຕອບຂອງ dropdown:
$caret-width: .3em;
$caret-vertical-align: $caret-width * .85;
$caret-spacing: $caret-width * .85;
ມິກຊິນ
Mixins ຖືກນໍາໃຊ້ເພື່ອສ້າງ carets ທີ່ອີງໃສ່ CSS ແລະສາມາດພົບເຫັນຢູ່ໃນ scss/mixins/_caret.scss
.
@mixin caret-down {
border-top: $caret-width solid;
border-right: $caret-width solid transparent;
border-bottom: 0;
border-left: $caret-width solid transparent;
}
@mixin caret-up {
border-top: 0;
border-right: $caret-width solid transparent;
border-bottom: $caret-width solid;
border-left: $caret-width solid transparent;
}
@mixin caret-end {
border-top: $caret-width solid transparent;
border-right: 0;
border-bottom: $caret-width solid transparent;
border-left: $caret-width solid;
}
@mixin caret-start {
border-top: $caret-width solid transparent;
border-right: $caret-width solid;
border-bottom: $caret-width solid transparent;
}
@mixin caret($direction: down) {
@if $enable-caret {
&::after {
display: inline-block;
margin-left: $caret-spacing;
vertical-align: $caret-vertical-align;
content: "";
@if $direction == down {
@include caret-down();
} @else if $direction == up {
@include caret-up();
} @else if $direction == end {
@include caret-end();
}
}
@if $direction == start {
&::after {
display: none;
}
&::before {
display: inline-block;
margin-right: $caret-spacing;
vertical-align: $caret-vertical-align;
content: "";
@include caret-start();
}
}
&:empty::after {
margin-left: 0;
}
}
}
ການນໍາໃຊ້
ຜ່ານຄຸນລັກສະນະຂໍ້ມູນ ຫຼື JavaScript, ປລັກອິນແບບເລື່ອນລົງຈະສະຫຼັບເນື້ອຫາທີ່ເຊື່ອງໄວ້ (ເມນູແບບເລື່ອນລົງ) ໂດຍການສະຫຼັບ .show
ຊັ້ນຮຽນຢູ່ເທິງຫຼັກ .dropdown-menu
. ຄຸນລັກ ສະ data-bs-toggle="dropdown"
ນະແມ່ນອີງໃສ່ການປິດເມນູແບບເລື່ອນລົງໃນລະດັບແອັບພລິເຄຊັນ, ສະນັ້ນມັນເປັນຄວາມຄິດທີ່ດີທີ່ຈະໃຊ້ມັນຕະຫຼອດເວລາ.
mouseover
ໃຫ້ກັບ
ອົງປະກອບຂອງ <body>
ອົງປະກອບ. ການ hack ທີ່ຫນ້າກຽດທີ່ຍອມຮັບນີ້ແມ່ນມີຄວາມຈໍາເປັນເພື່ອເຮັດວຽກຮອບໆ
quirk ໃນ iOS' event delegation , ເຊິ່ງຖ້າບໍ່ດັ່ງນັ້ນຈະປ້ອງກັນການປາດຈາກບ່ອນໃດກໍ່ຕາມຢູ່ນອກ dropdown ຈາກການກະຕຸ້ນລະຫັດທີ່ປິດ dropdown ໄດ້. ເມື່ອ dropdown ໄດ້ຖືກປິດ,
mouseover
handlers ຫວ່າງເພີ່ມເຕີມເຫຼົ່ານີ້ໄດ້ຖືກໂຍກຍ້າຍອອກ.
ຜ່ານຄຸນລັກສະນະຂໍ້ມູນ
ເພີ່ມ data-bs-toggle="dropdown"
ໃສ່ລິ້ງ ຫຼືປຸ່ມເພື່ອສະຫຼັບການເລື່ອນລົງ.
<div class="dropdown">
<button id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
...
</ul>
</div>
ຜ່ານ JavaScript
ໂທຫາ dropdowns ຜ່ານ JavaScript:
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"
ຍັງຕ້ອງການ
ບໍ່ວ່າທ່ານຈະໂທຫາ dropdown ຂອງທ່ານຜ່ານ JavaScript ຫຼືແທນທີ່ຈະໃຊ້ data-api, data-bs-toggle="dropdown"
ສະເຫມີຈໍາເປັນຕ້ອງມີຢູ່ໃນອົງປະກອບ trigger ຂອງ dropdown.
ທາງເລືອກ
ທາງເລືອກສາມາດຖືກສົ່ງຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼື JavaScript. ສໍາລັບຄຸນລັກສະນະຂໍ້ມູນ, ຕື່ມຊື່ທາງເລືອກໃສ່ data-bs-
, ໃນ data-bs-offset=""
. ໃຫ້ແນ່ໃຈວ່າປ່ຽນປະເພດກໍລະນີຂອງຊື່ທາງເລືອກຈາກ camelCase ເປັນ kebab-case ເມື່ອຖ່າຍທອດທາງເລືອກໂດຍຜ່ານຄຸນລັກສະນະຂໍ້ມູນ. ຕົວຢ່າງ, ແທນທີ່ຈະໃຊ້ data-bs-autoClose="false"
, ໃຊ້ data-bs-auto-close="false"
.
ຊື່ | ປະເພດ | ຄ່າເລີ່ມຕົ້ນ | ລາຍລະອຽດ |
---|---|---|---|
boundary |
ຊ່ອຍແນ່ | ອົງປະກອບ | 'clippingParents' |
ຂອບເຂດຈໍາກັດ overflow ຂອງເມນູແບບເລື່ອນລົງ (ໃຊ້ກັບຕົວແກ້ໄຂການປ້ອງກັນການ overflow ຂອງ Popper ເທົ່ານັ້ນ). ໂດຍຄ່າເລີ່ມຕົ້ນມັນເປັນ 'clippingParents' ແລະສາມາດຍອມຮັບການອ້າງອີງ HTMLElement (ຜ່ານ JavaScript ເທົ່ານັ້ນ). ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມເບິ່ງ ເອກະສານ detectOverflow ຂອງ Popper . |
reference |
ຊ່ອຍແນ່ | ອົງປະກອບ | ວັດຖຸ | 'toggle' |
ອົງປະກອບອ້າງອີງຂອງເມນູເລື່ອນລົງ. ຍອມຮັບຄ່າຂອງ 'toggle' , 'parent' , ການອ້າງອີງ HTMLElement ຫຼືວັດຖຸທີ່ໃຫ້ getBoundingClientRect . ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມໃຫ້ເບິ່ງທີ່ Docs constructor ຂອງ Popper ແລະ ເອກະສານ ອົງປະກອບ virtual . |
display |
ສາຍ | 'dynamic' |
ໂດຍຄ່າເລີ່ມຕົ້ນ, ພວກເຮົາໃຊ້ Popper ສໍາລັບການຈັດຕໍາແຫນ່ງແບບເຄື່ອນໄຫວ. ປິດການໃຊ້ງານນີ້ດ້ວຍ static . |
offset |
array | ຊ່ອຍແນ່ | ຫນ້າທີ່ | [0, 2] |
ຊົດເຊີຍຂອງການຫຼຸດລົງທຽບກັບເປົ້າຫມາຍຂອງມັນ. ທ່ານສາມາດຖ່າຍທອດສະຕຣິງໃນຄຸນລັກສະນະຂໍ້ມູນດ້ວຍຄ່າທີ່ແຍກດ້ວຍເຄື່ອງໝາຍຈຸດເຊັ່ນ: ເມື່ອຟັງຊັນຖືກນໍາໃຊ້ເພື່ອກໍານົດການຊົດເຊີຍ, ມັນຖືກເອີ້ນວ່າວັດຖຸທີ່ມີການຈັດວາງ popper, ການອ້າງອີງ, ແລະ popper rects ເປັນການໂຕ້ຖຽງທໍາອິດຂອງມັນ. ອົງປະກອບກະຕຸ້ນ DOM node ແມ່ນຜ່ານເປັນອາກິວເມັນທີສອງ. ຟັງຊັນຕ້ອງສົ່ງຄືນ array ທີ່ມີສອງຕົວເລກ: . ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມເບິ່ງ ເອກະສານຊົດເຊີຍ ຂອງ Popper . |
autoClose |
ບູລີນ | ສາຍ | true |
ຕັ້ງຄ່າພຶດຕິກໍາການປິດອັດຕະໂນມັດຂອງ dropdown:
|
popperConfig |
null | ວັດຖຸ | ຫນ້າທີ່ | null |
ເພື່ອປ່ຽນການຕັ້ງຄ່າ Popper ເລີ່ມຕົ້ນຂອງ Bootstrap, ເບິ່ງ ການຕັ້ງຄ່າຂອງ Popper . ເມື່ອຟັງຊັນຖືກໃຊ້ເພື່ອສ້າງການຕັ້ງຄ່າ Popper, ມັນຖືກເອີ້ນດ້ວຍວັດຖຸທີ່ມີການຕັ້ງຄ່າ Popper ເລີ່ມຕົ້ນຂອງ Bootstrap. ມັນຊ່ວຍໃຫ້ທ່ານໃຊ້ແລະລວມຄ່າເລີ່ມຕົ້ນກັບການຕັ້ງຄ່າຂອງທ່ານເອງ. ຟັງຊັນຕ້ອງສົ່ງຄືນວັດຖຸການຕັ້ງຄ່າສໍາລັບ Popper. |
ການນໍາໃຊ້ຟັງຊັນທີ່ມີpopperConfig
var dropdown = new bootstrap.Dropdown(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
ວິທີການ
ວິທີການ | ລາຍລະອຽດ |
---|---|
toggle |
ສະຫຼັບເມນູແບບເລື່ອນລົງຂອງແຖບນຳທາງທີ່ລະບຸ ຫຼືການນຳທາງແຖບ. |
show |
ສະແດງໃຫ້ເຫັນເມນູເລື່ອນລົງຂອງ navbar ທີ່ໃຫ້ຫຼືການນໍາທາງແຖບ. |
hide |
ເຊື່ອງເມນູແບບເລື່ອນລົງຂອງແຖບນຳທາງທີ່ກຳນົດໄວ້ ຫຼືການນຳທາງແຖບ. |
update |
ອັບເດດຕຳແໜ່ງການເລື່ອນລົງຂອງອົງປະກອບໃດໜຶ່ງ. |
dispose |
ທໍາລາຍການເລື່ອນລົງຂອງອົງປະກອບ. (ລຶບຂໍ້ມູນທີ່ເກັບໄວ້ໃນອົງປະກອບ DOM) |
getInstance |
ວິທີການຄົງທີ່ທີ່ຊ່ວຍໃຫ້ທ່ານໄດ້ຮັບຕົວຢ່າງແບບເລື່ອນລົງທີ່ກ່ຽວຂ້ອງກັບອົງປະກອບ DOM, ທ່ານສາມາດນໍາໃຊ້ມັນເຊັ່ນນີ້:bootstrap.Dropdown.getInstance(element) |
getOrCreateInstance |
ວິທີການຄົງທີ່ທີ່ຈະສົ່ງຄືນຕົວຢ່າງແບບເລື່ອນລົງທີ່ກ່ຽວຂ້ອງກັບອົງປະກອບ DOM ຫຼືສ້າງອັນໃຫມ່ໃນກໍລະນີທີ່ມັນບໍ່ໄດ້ຖືກເລີ່ມຕົ້ນ. ທ່ານສາມາດນໍາໃຊ້ມັນເຊັ່ນນີ້:bootstrap.Dropdown.getOrCreateInstance(element) |
ເຫດການ
ເຫດການແບບເລື່ອນລົງທັງໝົດຈະຖືກຍິງໃສ່ອົງປະກອບສະຫຼັບ ແລະ ຈາກນັ້ນກໍ່ເກີດຟອງຂຶ້ນ. ດັ່ງນັ້ນ, ທ່ານຍັງສາມາດເພີ່ມຜູ້ຟັງເຫດການຢູ່ໃນ .dropdown-menu
ອົງປະກອບຫຼັກຂອງ. hide.bs.dropdown
ແລະ hidden.bs.dropdown
ເຫດການມີ clickEvent
ຄຸນສົມບັດ (ພຽງແຕ່ເມື່ອປະເພດເຫດການຕົ້ນສະບັບແມ່ນ click
) ທີ່ມີວັດຖຸເຫດການສໍາລັບເຫດການຄລິກ.
ວິທີການ | ລາຍລະອຽດ |
---|---|
show.bs.dropdown |
ໄຟໄຫມ້ທັນທີເມື່ອວິທີການສະແດງຕົວຢ່າງຖືກເອີ້ນ. |
shown.bs.dropdown |
ຍິງເມື່ອການເລື່ອນລົງໄດ້ຖືກເຮັດໃຫ້ເຫັນໄດ້ໂດຍຜູ້ໃຊ້ແລະການຫັນປ່ຽນ CSS ໄດ້ສໍາເລັດ. |
hide.bs.dropdown |
ໄຟໄຫມ້ທັນທີເມື່ອວິທີການເຊື່ອງຕົວຢ່າງຖືກເອີ້ນ. |
hidden.bs.dropdown |
ຍິງເມື່ອການເລື່ອນລົງໄດ້ສໍາເລັດການຖືກເຊື່ອງໄວ້ຈາກຜູ້ໃຊ້ແລະການຫັນປ່ຽນ CSS ໄດ້ສໍາເລັດ. |
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something...
})