ເລື່ອນລົງ
ສະຫຼັບການວາງຊ້ອນຕາມບໍລິບົດເພື່ອສະແດງລາຍການລິ້ງ ແລະອື່ນໆອີກດ້ວຍ plugin dropdown Bootstrap.
ພາບລວມ
ເລື່ອນລົງແມ່ນສາມາດສະຫຼັບໄດ້, ການວາງຊ້ອນກັນຕາມບໍລິບົດເພື່ອສະແດງລາຍຊື່ຂອງລິ້ງ ແລະອື່ນໆອີກ. ພວກມັນຖືກສ້າງປະຕິສຳພັນກັບປລັກອິນ JavaScript ແບບເລື່ອນລົງຂອງ Bootstrap. ພວກມັນຖືກສະຫຼັບໂດຍການຄລິກ, ບໍ່ແມ່ນໂດຍການເລື່ອນ; ນີ້ແມ່ນ ການຕັດສິນໃຈອອກແບບໂດຍເຈດຕະນາ .
Dropdowns ຖືກສ້າງຂຶ້ນໃນຫ້ອງສະຫມຸດພາກສ່ວນທີສາມ, Popper , ເຊິ່ງສະຫນອງການຈັດຕໍາແຫນ່ງແບບເຄື່ອນໄຫວແລະການກວດສອບ viewport. ໃຫ້ແນ່ໃຈວ່າລວມເອົາ popper.min.js ກ່ອນ JavaScript ຂອງ Bootstrap ຫຼືໃຊ້ bootstrap.bundle.min.js
/ bootstrap.bundle.js
ທີ່ມີ Popper. Popper ບໍ່ໄດ້ຖືກນໍາໃຊ້ເພື່ອຈັດຕໍາແຫນ່ງ dropdowns ໃນ navbars ເຖິງແມ່ນວ່າການວາງຕໍາແຫນ່ງແບບເຄື່ອນໄຫວແມ່ນບໍ່ຈໍາເປັນ.
ຖ້າທ່ານກໍາລັງສ້າງ JavaScript ຂອງພວກເຮົາຈາກແຫຼ່ງ, ມັນ ຕ້ອງການutil.js
.
ການເຂົ້າເຖິງ
ມາດ ຕະ ຖານ WAI ARIA ກໍານົດ role="menu"
widget ຕົວຈິງ , ແຕ່ນີ້ແມ່ນສະເພາະກັບເມນູທີ່ຄ້າຍຄືຄໍາຮ້ອງສະຫມັກທີ່ຈະກະຕຸ້ນການປະຕິບັດຫຼືຫນ້າທີ່. ເມນູ ARIA ສາມາດມີພຽງແຕ່ລາຍການເມນູ, ລາຍການເມນູກ່ອງກາໝາຍ, ລາຍການເມນູປຸ່ມວິທະຍຸ, ກຸ່ມປຸ່ມວິທະຍຸ ແລະເມນູຍ່ອຍ.
ໃນທາງກົງກັນຂ້າມ, ການຫຼຸດລົງຂອງ Bootstrap ໄດ້ຖືກອອກແບບເພື່ອໃຫ້ເປັນແບບທົ່ວໄປແລະໃຊ້ໄດ້ກັບຫຼາຍໆສະຖານະການແລະໂຄງສ້າງເຄື່ອງຫມາຍ. ຕົວຢ່າງ, ມັນເປັນໄປໄດ້ທີ່ຈະສ້າງ dropdowns ທີ່ມີ inputs ເພີ່ມເຕີມແລະການຄວບຄຸມແບບຟອມ, ເຊັ່ນ: ຊ່ອງຄົ້ນຫາຫຼືແບບຟອມເຂົ້າສູ່ລະບົບ. ສໍາລັບເຫດຜົນນີ້, Bootstrap ບໍ່ໄດ້ຄາດຫວັງ (ຫຼືເພີ່ມອັດຕະໂນມັດ) ໃດໆ role
ແລະ aria-
ຄຸນລັກສະນະທີ່ຕ້ອງການສໍາລັບ ເມນູ ARIA ທີ່ແທ້ຈິງ. ຜູ້ຂຽນຈະຕ້ອງລວມເອົາຄຸນລັກສະນະສະເພາະເຫຼົ່ານີ້ດ້ວຍຕົນເອງ.
ຢ່າງໃດກໍຕາມ, Bootstrap ເພີ່ມການສະຫນັບສະຫນູນໃນຕົວສໍາລັບການໂຕ້ຕອບຂອງເມນູແປ້ນພິມມາດຕະຖານສ່ວນໃຫຍ່, ເຊັ່ນ: ຄວາມສາມາດໃນການຍ້າຍຜ່ານ .dropdown-item
ອົງປະກອບສ່ວນບຸກຄົນໂດຍໃຊ້ປຸ່ມຕົວກະພິບແລະປິດເມນູດ້ວຍ ESCປຸ່ມ.
ຕົວຢ່າງ
ຫໍ່ປິດສະຫຼັບຂອງແບບເລື່ອນລົງ (ປຸ່ມ ຫຼືລິ້ງຂອງທ່ານ) ແລະເມນູເລື່ອນລົງພາຍໃນ .dropdown
, ຫຼືອົງປະກອບອື່ນທີ່ປະກາດ position: relative;
. Dropdowns ສາມາດຖືກກະຕຸ້ນຈາກ <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>
ປຸ່ມແຍກ
ເຊັ່ນດຽວກັນ, ສ້າງການເລື່ອນລົງປຸ່ມທີ່ແບ່ງອອກໂດຍມີເຄື່ອງຫມາຍ 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-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
ກະຕຸ້ນເມນູແບບເລື່ອນລົງທາງຊ້າຍຂອງອົງປະກອບໂດຍການເພີ່ມ .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 ອີກຕໍ່ໄປ. ໃນປັດຈຸບັນທ່ານສາມາດເລືອກໃຊ້ <button>
ອົງປະກອບໃນ dropdowns ຂອງທ່ານແທນທີ່ຈະເປັນພຽງແຕ່ <a>
s.
<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>
ການຈັດຕໍາແຫນ່ງທີ່ຕອບສະຫນອງ
ຖ້າທ່ານຕ້ອງການໃຊ້ການຈັດຮຽງແບບຕອບສະໜອງ, ໃຫ້ປິດການຈັດຕຳແໜ່ງແບບໄດນາມິກໂດຍການເພີ່ມ 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"
ຄຸນລັກສະນະຂອງປຸ່ມເລື່ອນລົງໃນແຖບ navbars, ເພາະວ່າ Popper ບໍ່ໄດ້ຖືກນໍາໃຊ້ໃນ 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
ປ່ຽນສະຖານທີ່ຂອງ dropdown ໄດ້.
<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>
ການນໍາໃຊ້
ຜ່ານຄຸນລັກສະນະຂໍ້ມູນ ຫຼື JavaScript, ປລັກອິນແບບເລື່ອນລົງຈະສະຫຼັບເນື້ອຫາທີ່ເຊື່ອງໄວ້ (ເມນູແບບເລື່ອນລົງ) ໂດຍການສະຫຼັບ .show
ຊັ້ນຮຽນຢູ່ເທິງຫຼັກ .dropdown-menu
. ຄຸນລັກ ສະ data-toggle="dropdown"
ນະແມ່ນອີງໃສ່ການປິດເມນູແບບເລື່ອນລົງໃນລະດັບແອັບພລິເຄຊັນ, ສະນັ້ນມັນເປັນຄວາມຄິດທີ່ດີທີ່ຈະໃຊ້ມັນຕະຫຼອດເວລາ.
$.noop
)
mouseover
ໃຫ້ກັບເດັກນ້ອຍໃນທັນທີຂອງ
<body>
ອົງປະກອບ. ການ hack ທີ່ຫນ້າກຽດທີ່ຍອມຮັບນີ້ແມ່ນມີຄວາມຈໍາເປັນເພື່ອເຮັດວຽກຮອບໆ
quirk ໃນ iOS' event delegation , ເຊິ່ງຖ້າບໍ່ດັ່ງນັ້ນຈະປ້ອງກັນການປາດຈາກບ່ອນໃດກໍ່ຕາມຢູ່ນອກ dropdown ຈາກການກະຕຸ້ນລະຫັດທີ່ປິດ dropdown ໄດ້. ເມື່ອ dropdown ໄດ້ຖືກປິດ,
mouseover
handlers ຫວ່າງເພີ່ມເຕີມເຫຼົ່ານີ້ໄດ້ຖືກໂຍກຍ້າຍອອກ.
ຜ່ານຄຸນລັກສະນະຂໍ້ມູນ
ເພີ່ມ 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
ໂທຫາ dropdowns ຜ່ານ JavaScript:
$('.dropdown-toggle').dropdown()
data-toggle="dropdown"
ຍັງຕ້ອງການ
ບໍ່ວ່າທ່ານຈະໂທຫາ dropdown ຂອງທ່ານຜ່ານ JavaScript ຫຼືແທນທີ່ຈະໃຊ້ data-api, data-toggle="dropdown"
ສະເຫມີຈໍາເປັນຕ້ອງມີຢູ່ໃນອົງປະກອບ trigger ຂອງ dropdown.
ທາງເລືອກ
ທາງເລືອກສາມາດຖືກສົ່ງຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼື JavaScript. ສໍາລັບຄຸນລັກສະນະຂໍ້ມູນ, ຕື່ມຊື່ທາງເລືອກໃສ່ data-
, ໃນ data-offset=""
.
ຊື່ | ປະເພດ | ຄ່າເລີ່ມຕົ້ນ | ລາຍລະອຽດ |
---|---|---|---|
ຊົດເຊີຍ | ເລກ | ຊ່ອຍແນ່ | ຫນ້າທີ່ | 0 | ຊົດເຊີຍຂອງການຫຼຸດລົງທຽບກັບເປົ້າຫມາຍຂອງມັນ. ເມື່ອຟັງຊັນໃດນຶ່ງຖືກໃຊ້ເພື່ອກໍານົດຄ່າຊົດເຊີຍ, ມັນຖືກເອີ້ນດ້ວຍວັດຖຸທີ່ມີຂໍ້ມູນຊົດເຊີຍເປັນອາກິວເມັນທຳອິດຂອງມັນ. ຟັງຊັນຕ້ອງສົ່ງຄືນວັດຖຸທີ່ມີໂຄງສ້າງດຽວກັນ. ອົງປະກອບກະຕຸ້ນ DOM node ຖືກສົ່ງຜ່ານເປັນອາກິວເມັນທີສອງ. ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມເບິ່ງ ເອກະສານຊົດເຊີຍ ຂອງ Popper . |
ພິກ | ບູລີນ | ຄວາມຈິງ | ອະນຸຍາດໃຫ້ເລື່ອນລົງເພື່ອພິກໃນກໍລະນີມີການທັບຊ້ອນກັນຢູ່ໃນອົງປະກອບອ້າງອີງ. ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມເບິ່ງທີ່ Popper's flip docs . |
ເຂດແດນ | ຊ່ອຍແນ່ | ອົງປະກອບ | 'scrollParent' | Overflow ຂອບເຂດຈໍາກັດຂອງເມນູເລື່ອນລົງ. ຍອມຮັບຄ່າຂອງ 'viewport' , 'window' , 'scrollParent' , ຫຼືການອ້າງອີງ HTMLElement (JavaScript ເທົ່ານັ້ນ). ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມເບິ່ງ Docs PreventOverflow ຂອງ Popper . |
ອ້າງອິງ | ຊ່ອຍແນ່ | ອົງປະກອບ | 'ສະຫຼັບ' | ອົງປະກອບອ້າງອີງຂອງເມນູເລື່ອນລົງ. ຍອມຮັບຄ່າຂອງ 'toggle' , 'parent' , ຫຼືການອ້າງອີງ HTMLElement. ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມເບິ່ງ ເອກະສານອ້າງອີງ ຂອງ Popper . |
ຈໍສະແດງຜົນ | ສາຍ | 'ເຄື່ອນໄຫວ' | ໂດຍຄ່າເລີ່ມຕົ້ນ, ພວກເຮົາໃຊ້ Popper ສໍາລັບການຈັດຕໍາແຫນ່ງແບບເຄື່ອນໄຫວ. ປິດການໃຊ້ງານນີ້ດ້ວຍ static . |
popperConfig | null | ວັດຖຸ | null | ເພື່ອປ່ຽນການຕັ້ງຄ່າ Popper ເລີ່ມຕົ້ນຂອງ Bootstrap, ເບິ່ງ ການຕັ້ງຄ່າຂອງ Popper |
ໝາຍເຫດເມື່ອ boundary
ຖືກຕັ້ງເປັນຄ່າອື່ນນອກເໜືອໄປຈາກ 'scrollParent'
, ຮູບແບບ position: static
ຈະຖືກນຳໃຊ້ກັບ .dropdown
ບັນຈຸ.
ວິທີການ
ວິທີການ | ລາຍລະອຽດ |
---|---|
$().dropdown('toggle') |
ສະຫຼັບເມນູແບບເລື່ອນລົງຂອງແຖບນຳທາງທີ່ລະບຸ ຫຼືການນຳທາງແຖບ. |
$().dropdown('show') |
ສະແດງໃຫ້ເຫັນເມນູເລື່ອນລົງຂອງ navbar ທີ່ໃຫ້ຫຼືການນໍາທາງແຖບ. |
$().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...
})