Sourceទម្លាក់ចុះ
បិទ/បើកការត្រួតលើគ្នាតាមបរិបទសម្រាប់បង្ហាញបញ្ជីតំណ និងអ្វីៗជាច្រើនទៀតដោយប្រើកម្មវិធីជំនួយទម្លាក់ចុះ Bootstrap ។
ការទម្លាក់ចុះគឺអាចបិទបើកបាន ការត្រួតលើបរិបទសម្រាប់បង្ហាញបញ្ជីតំណ និងច្រើនទៀត។ ពួកវាត្រូវបានធ្វើអន្តរកម្មជាមួយនឹងកម្មវិធីជំនួយ JavaScript ទម្លាក់ចុះ Bootstrap រួមបញ្ចូល។ ពួកវាត្រូវបានបិទបើកដោយការចុច មិនមែនដោយសំកាំងទេ។ នេះគឺជា ការសម្រេចចិត្តរចនាដោយចេតនា។
ការទម្លាក់ចុះត្រូវបានបង្កើតឡើងនៅលើបណ្ណាល័យភាគីទីបី Popper.js ដែលផ្តល់នូវទីតាំងថាមវន្ត និងការរកឃើញច្រកមើល។ ត្រូវប្រាកដថាបញ្ចូល popper.min.js មុន JavaScript របស់ Bootstrap ឬប្រើ bootstrap.bundle.min.js
/ bootstrap.bundle.js
ដែលមាន Popper.js ។ Popper.js មិនត្រូវបានប្រើដើម្បីកំណត់ទីតាំងទម្លាក់ចុះនៅក្នុង navbars ទោះបីជាមិនតម្រូវឱ្យមានទីតាំងថាមវន្តក៏ដោយ។
ប្រសិនបើអ្នកកំពុងបង្កើត JavaScript របស់យើងពីប្រភព វា ទាមទារutil.js
.
ស្ដង់ដា រ WAI ARIA កំណត់ role="menu"
ធាតុក្រាហ្វិក ពិតប្រាកដ មួយ ប៉ុន្តែនេះគឺជាក់លាក់ចំពោះម៉ឺនុយដូចកម្មវិធីដែលបង្កឱ្យមានសកម្មភាព ឬមុខងារ។ ម៉ឺនុយ ARIA អាចមានតែធាតុម៉ឺនុយ ធាតុម៉ឺនុយប្រអប់ធីក ធាតុម៉ឺនុយប៊ូតុងមូល ក្រុមប៊ូតុងមូល និងម៉ឺនុយរង។
ម្យ៉ាងវិញទៀត ការទម្លាក់ចុះរបស់ Bootstrap ត្រូវបានរចនាឡើងដើម្បីឱ្យមានលក្ខណៈទូទៅ និងអាចអនុវត្តបានចំពោះស្ថានភាពផ្សេងៗ និងរចនាសម្ព័ន្ធសម្គាល់។ ជាឧទាហរណ៍ វាអាចបង្កើតបញ្ជីទម្លាក់ចុះដែលមានការបញ្ចូលបន្ថែម និងការគ្រប់គ្រងទម្រង់ ដូចជាវាលស្វែងរក ឬទម្រង់ចូល។ សម្រាប់ហេតុផលនេះ Bootstrap មិនរំពឹងថា (ឬបន្ថែមដោយស្វ័យប្រវត្តិ) ណាមួយនៃ role
និង aria-
គុណលក្ខណៈដែលត្រូវការសម្រាប់ ម៉ឺនុយ ARIA ពិត។ អ្នកនិពន្ធនឹងត្រូវបញ្ចូលគុណលក្ខណៈជាក់លាក់បន្ថែមទៀតទាំងនេះដោយខ្លួនឯង។
ទោះជាយ៉ាងណាក៏ដោយ Bootstrap បន្ថែមការគាំទ្រដែលភ្ជាប់មកជាមួយសម្រាប់អន្តរកម្មម៉ឺនុយក្តារចុចស្តង់ដារភាគច្រើន ដូចជាសមត្ថភាពក្នុងការផ្លាស់ទីតាមរយៈ .dropdown-item
ធាតុនីមួយៗដោយប្រើគ្រាប់ចុចទស្សន៍ទ្រនិច និងបិទម៉ឺនុយដោយប្រើ ESC គ្រាប់ចុច។
រុំបិទបើករបស់ទម្លាក់ចុះ (ប៊ូតុង ឬតំណរបស់អ្នក) និងម៉ឺនុយទម្លាក់ចុះនៅក្នុង .dropdown
ឬធាតុផ្សេងទៀតដែលប្រកាស position: relative;
។ ការទម្លាក់ចុះអាចត្រូវបានបង្កឡើងពី <a>
ឬ <button>
ធាតុនានាដើម្បីឱ្យសមនឹងតម្រូវការសក្តានុពលរបស់អ្នក។
មួយណា .btn
ក៏បានអាចត្រូវបានប្រែក្លាយទៅជាការបិទបើកដោយទម្លាក់ចុះជាមួយនឹងការផ្លាស់ប្តូរការសម្គាល់មួយចំនួន។ នេះជារបៀបដែលអ្នកអាចដាក់ពួកវាឱ្យធ្វើការជាមួយ <button>
ធាតុទាំងពីរ៖
ចម្លង
<div class= "dropdown" >
<button class= "btn btn-secondary dropdown-toggle" type= "button" id= "dropdownMenuButton" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Dropdown button
</button>
<div class= "dropdown-menu" aria-labelledby= "dropdownMenuButton" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</div>
ហើយជាមួយនឹង <a>
ធាតុ៖
ចម្លង
<div class= "dropdown" >
<a class= "btn btn-secondary dropdown-toggle" href= "#" role= "button" id= "dropdownMenuLink" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Dropdown link
</a>
<div class= "dropdown-menu" aria-labelledby= "dropdownMenuLink" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</div>
ផ្នែកដ៏ល្អបំផុតគឺអ្នកអាចធ្វើវាបានជាមួយនឹងវ៉ារ្យ៉ង់ប៊ូតុងណាមួយផងដែរ៖
បឋមសិក្សា
អនុវិទ្យាល័យ
ជោគជ័យ
ព័ត៌មាន
ការព្រមាន
គ្រោះថ្នាក់
ចម្លង
<!-- Example single danger button -->
<div class= "btn-group" >
<button type= "button" class= "btn btn-danger dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Action
</button>
<div class= "dropdown-menu" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
<div class= "dropdown-divider" ></div>
<a class= "dropdown-item" href= "#" > Separated link</a>
</div>
</div>
ស្រដៀងគ្នានេះដែរ បង្កើតការទម្លាក់ចុះនៃប៊ូតុងបំបែកជាមួយនឹងសញ្ញាសម្គាល់ស្ទើរតែដូចគ្នាទៅនឹងការទម្លាក់ចុះនៃប៊ូតុងតែមួយ ប៉ុន្តែជាមួយនឹងការបន្ថែម .dropdown-toggle-split
សម្រាប់គម្លាតត្រឹមត្រូវជុំវិញប្រអប់ទម្លាក់ចុះ។
យើងប្រើថ្នាក់បន្ថែមនេះ ដើម្បីកាត់បន្ថយការផ្តេក padding
នៅផ្នែកម្ខាងៗនៃ cart 25% ហើយដកផ្នែក margin-left
ដែលត្រូវបានបន្ថែមសម្រាប់ការទម្លាក់ប៊ូតុងធម្មតា។ ការផ្លាស់ប្តូរបន្ថែមទាំងនោះរក្សាគំនូសនៅកណ្តាលនៅក្នុងប៊ូតុងបំបែក និងផ្តល់នូវទំហំដែលសមស្របជាងមុនដែលនៅជិតប៊ូតុងមេ។
បឋមសិក្សា
បិទ/បើក ទម្លាក់ចុះ
អនុវិទ្យាល័យ
បិទ/បើក ទម្លាក់ចុះ
ជោគជ័យ
បិទ/បើក ទម្លាក់ចុះ
ព័ត៌មាន
បិទ/បើក ទម្លាក់ចុះ
ការព្រមាន
បិទ/បើក ទម្លាក់ចុះ
គ្រោះថ្នាក់
បិទ/បើក ទម្លាក់ចុះ
ចម្លង
<!-- Example split danger button -->
<div class= "btn-group" >
<button type= "button" class= "btn btn-danger" > Action</button>
<button type= "button" class= "btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<span class= "sr-only" > Toggle Dropdown</span>
</button>
<div class= "dropdown-menu" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
<div class= "dropdown-divider" ></div>
<a class= "dropdown-item" href= "#" > Separated link</a>
</div>
</div>
ប៊ូតុងទម្លាក់ចុះដំណើរការជាមួយប៊ូតុងគ្រប់ទំហំ រួមទាំងប៊ូតុងទម្លាក់ចុះលំនាំដើម និងបំបែក។
ចម្លង
<!-- Large button groups (default and split) -->
<div class= "btn-group" >
<button class= "btn btn-secondary btn-lg dropdown-toggle" type= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Large button
</button>
<div class= "dropdown-menu" >
...
</div>
</div>
<div class= "btn-group" >
<button class= "btn btn-secondary btn-lg" type= "button" >
Large split button
</button>
<button type= "button" class= "btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<span class= "sr-only" > Toggle Dropdown</span>
</button>
<div class= "dropdown-menu" >
...
</div>
</div>
<!-- Small button groups (default and split) -->
<div class= "btn-group" >
<button class= "btn btn-secondary btn-sm dropdown-toggle" type= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Small button
</button>
<div class= "dropdown-menu" >
...
</div>
</div>
<div class= "btn-group" >
<button class= "btn btn-secondary btn-sm" type= "button" >
Small split button
</button>
<button type= "button" class= "btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<span class= "sr-only" > Toggle Dropdown</span>
</button>
<div class= "dropdown-menu" >
...
</div>
</div>
កេះម៉ឺនុយទម្លាក់ចុះខាងលើធាតុដោយបន្ថែម .dropup
ទៅធាតុមេ។
ទម្លាក់ចុះ
បំបែកការទម្លាក់ចុះ
បិទ/បើក ទម្លាក់ចុះ
ចម្លង
<!-- Default dropup button -->
<div class= "btn-group dropup" >
<button type= "button" class= "btn btn-secondary dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Dropup
</button>
<div class= "dropdown-menu" >
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropup button -->
<div class= "btn-group dropup" >
<button type= "button" class= "btn btn-secondary" >
Split dropup
</button>
<button type= "button" class= "btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<span class= "sr-only" > Toggle Dropdown</span>
</button>
<div class= "dropdown-menu" >
<!-- Dropdown menu links -->
</div>
</div>
កេះម៉ឺនុយទម្លាក់ចុះនៅខាងស្តាំនៃធាតុដោយបន្ថែម .dropright
ទៅធាតុមេ។
ទំលាក់
បំបែកត្រង់
បិទបើក Dropright
ចម្លង
<!-- Default dropright button -->
<div class= "btn-group dropright" >
<button type= "button" class= "btn btn-secondary dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Dropright
</button>
<div class= "dropdown-menu" >
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropright button -->
<div class= "btn-group dropright" >
<button type= "button" class= "btn btn-secondary" >
Split dropright
</button>
<button type= "button" class= "btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<span class= "sr-only" > Toggle Dropright</span>
</button>
<div class= "dropdown-menu" >
<!-- Dropdown menu links -->
</div>
</div>
កេះម៉ឺនុយទម្លាក់ចុះនៅខាងឆ្វេងនៃធាតុដោយបន្ថែម .dropleft
ទៅធាតុមេ។
ទម្លាក់
បិទបើក Dropleft
បំបែកតំណក់ឆ្វេង
ចម្លង
<!-- Default dropleft button -->
<div class= "btn-group dropleft" >
<button type= "button" class= "btn btn-secondary dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Dropleft
</button>
<div class= "dropdown-menu" >
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropleft button -->
<div class= "btn-group" >
<div class= "btn-group dropleft" role= "group" >
<button type= "button" class= "btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<span class= "sr-only" > Toggle Dropleft</span>
</button>
<div class= "dropdown-menu" >
<!-- Dropdown menu links -->
</div>
</div>
<button type= "button" class= "btn btn-secondary" >
Split dropleft
</button>
</div>
មាតិកាម៉ឺនុយទម្លាក់ចុះជាប្រវត្តិសាស្ត្រ ត្រូវតែ ជាតំណភ្ជាប់ ប៉ុន្តែនោះមិនមែនជាករណីជាមួយ v4 ទៀតទេ។ ឥឡូវនេះអ្នកអាចប្រើជាជម្រើសក្នុងការប្រើ <button>
ធាតុនៅក្នុងបញ្ជីទម្លាក់ចុះរបស់អ្នកជំនួសឱ្យគ្រាន់តែ <a>
s ។
ចម្លង
<div class= "dropdown" >
<button class= "btn btn-secondary dropdown-toggle" type= "button" id= "dropdownMenu2" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Dropdown
</button>
<div class= "dropdown-menu" aria-labelledby= "dropdownMenu2" >
<button class= "dropdown-item" type= "button" > Action</button>
<button class= "dropdown-item" type= "button" > Another action</button>
<button class= "dropdown-item" type= "button" > Something else here</button>
</div>
</div>
អ្នកក៏អាចបង្កើតធាតុទម្លាក់ចុះដែលមិនអន្តរកម្មជាមួយ .dropdown-item-text
. មានអារម្មណ៍សេរីដើម្បីធ្វើរចនាប័ទ្មបន្ថែមទៀតជាមួយ CSS ឬឧបករណ៍ប្រើប្រាស់អត្ថបទផ្ទាល់ខ្លួន។
ចម្លង
<div class= "dropdown-menu" >
<span class= "dropdown-item-text" > Dropdown item text</span>
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
បន្ថែម .active
ទៅធាតុនៅក្នុងបញ្ជីទម្លាក់ចុះដើម្បីធ្វើ រចនាប័ទ្មពួកវាជាសកម្ម ។
ចម្លង
<div class= "dropdown-menu" >
<a class= "dropdown-item" href= "#" > Regular link</a>
<a class= "dropdown-item active" href= "#" > Active link</a>
<a class= "dropdown-item" href= "#" > Another link</a>
</div>
បន្ថែម .disabled
ទៅធាតុនៅក្នុងបញ្ជីទម្លាក់ចុះដើម្បីធ្វើ រចនាប័ទ្មពួកវាថាបានបិទ ។
ចម្លង
<div class= "dropdown-menu" >
<a class= "dropdown-item" href= "#" > Regular link</a>
<a class= "dropdown-item disabled" href= "#" > Disabled link</a>
<a class= "dropdown-item" href= "#" > Another link</a>
</div>
តាមលំនាំដើម ម៉ឺនុយទម្លាក់ចុះត្រូវបានដាក់ដោយស្វ័យប្រវត្តិ 100% ពីខាងលើ និងនៅផ្នែកខាងឆ្វេងនៃមេរបស់វា។ បន្ថែម .dropdown-menu-right
ទៅ .dropdown-menu
ស្តាំ តម្រឹមម៉ឺនុយទម្លាក់ចុះ។
ព្រឺក្បាល! ការទម្លាក់ចុះត្រូវបានដាក់ដោយអរគុណចំពោះ Popper.js (លើកលែងតែនៅពេលដែលពួកវាត្រូវបានដាក់ក្នុងរបាររុករក)។
ចម្លង
<div class= "btn-group" >
<button type= "button" class= "btn btn-secondary dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Right-aligned menu
</button>
<div class= "dropdown-menu dropdown-menu-right" >
<button class= "dropdown-item" type= "button" > Action</button>
<button class= "dropdown-item" type= "button" > Another action</button>
<button class= "dropdown-item" type= "button" > Something else here</button>
</div>
</div>
បន្ថែមបឋមកថាទៅផ្នែកស្លាកនៃសកម្មភាពនៅក្នុងម៉ឺនុយទម្លាក់ចុះណាមួយ។
ចម្លង
<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-check" >
<input type= "checkbox" class= "form-check-input" id= "dropdownCheck" >
<label class= "form-check-label" for= "dropdownCheck" >
Remember me
</label>
</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-check" >
<input type= "checkbox" class= "form-check-input" id= "dropdownCheck2" >
<label class= "form-check-label" for= "dropdownCheck2" >
Remember me
</label>
</div>
<button type= "submit" class= "btn btn-primary" > Sign in</button>
</form>
ប្រើ data-offset
ឬ data-reference
ផ្លាស់ប្តូរទីតាំងនៃបញ្ជីទម្លាក់ចុះ។
ចម្លង
<div class= "d-flex" >
<div class= "dropdown mr-1" >
<button type= "button" class= "btn btn-secondary dropdown-toggle" id= "dropdownMenuOffset" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" data-offset= "10,20" >
Offset
</button>
<div class= "dropdown-menu" aria-labelledby= "dropdownMenuOffset" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</div>
<div class= "btn-group" >
<button type= "button" class= "btn btn-secondary" > Reference</button>
<button type= "button" class= "btn btn-secondary dropdown-toggle dropdown-toggle-split" id= "dropdownMenuReference" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" data-reference= "parent" >
<span class= "sr-only" > Toggle Dropdown</span>
</button>
<div class= "dropdown-menu" aria-labelledby= "dropdownMenuReference" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
<div class= "dropdown-divider" ></div>
<a class= "dropdown-item" href= "#" > Separated link</a>
</div>
</div>
</div>
តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ JavaScript កម្មវិធីជំនួយទម្លាក់ចុះបិទបើកមាតិកាដែលលាក់ (ម៉ឺនុយទម្លាក់ចុះ) ដោយបិទបើក .show
ថ្នាក់នៅលើធាតុបញ្ជីមេ។ គុណលក្ខណៈ data-toggle="dropdown"
គឺពឹងផ្អែកលើការបិទម៉ឺនុយទម្លាក់ចុះនៅកម្រិតកម្មវិធី ដូច្នេះវាជាការប្រសើរក្នុងការប្រើវាជានិច្ច។
On touch-enabled devices, opening a dropdown adds empty ($.noop
) mouseover
handlers to the immediate children of the <body>
element. This admittedly ugly hack is necessary to work around a quirk in iOS’ event delegation , which would otherwise prevent a tap anywhere outside of the dropdown from triggering the code that closes the dropdown. Once the dropdown is closed, these additional empty mouseover
handlers are removed.
Add data-toggle="dropdown"
to a link or button to toggle a dropdown.
Copy
<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>
Call the dropdowns via JavaScript:
Copy
$ ( '.dropdown-toggle' ). dropdown ()
data-toggle="dropdown"
still required
Regardless of whether you call your dropdown via JavaScript or instead use the data-api, data-toggle="dropdown"
is always required to be present on the dropdown’s trigger element.
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in data-offset=""
.
Name
Type
Default
Description
offset
number | string | function
0
Offset of the dropdown relative to its target. For more information refer to Popper.js's offset docs .
flip
boolean
true
Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper.js's flip docs .
boundary
string | element
'scrollParent'
Overflow constraint boundary of the dropdown menu. Accepts the values of 'viewport'
, 'window'
, 'scrollParent'
, or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs .
reference
string | element
'toggle'
Reference element of the dropdown menu. Accepts the values of 'toggle'
, 'parent'
, or an HTMLElement reference. For more information refer to Popper.js's referenceObject docs .
display
string
'dynamic'
By default, we use Popper.js for dynamic positioning. Disable this with static
.
Note when boundary
is set to any value other than 'scrollParent'
, the style position: static
is applied to the .dropdown
container.
Method
Description
$().dropdown('toggle')
Toggles the dropdown menu of a given navbar or tabbed navigation.
$().dropdown('update')
Updates the position of an element’s dropdown.
$().dropdown('dispose')
Destroys an element’s dropdown.
ព្រឹត្តិការណ៍ទម្លាក់ចុះទាំងអស់ត្រូវបានដំណើរការនៅ .dropdown-menu
ធាតុមេរបស់ ហើយមាន relatedTarget
ទ្រព្យសម្បត្តិ ដែលតម្លៃរបស់វាជាធាតុយុថ្កាដែលបិទបើក។ hide.bs.dropdown
ហើយ hidden.bs.dropdown
ព្រឹត្តិការណ៍មាន clickEvent
លក្ខណសម្បត្តិ (តែនៅពេលដែលប្រភេទព្រឹត្តិការណ៍ដើមគឺ click
) ដែលមាន Event Object សម្រាប់ព្រឹត្តិការណ៍ចុច។
ព្រឹត្តិការណ៍
ការពិពណ៌នា
show.bs.dropdown
ព្រឹត្តិការណ៍នេះឆេះភ្លាមៗ នៅពេលគេហៅវិធីសាស្ត្របង្ហាញឧទាហរណ៍។
shown.bs.dropdown
ព្រឹត្តិការណ៍នេះត្រូវបានបញ្ឈប់នៅពេលដែលការទម្លាក់ចុះត្រូវបានធ្វើឱ្យអ្នកប្រើមើលឃើញ (នឹងរង់ចាំការផ្លាស់ប្តូរ CSS ដើម្បីបញ្ចប់)។
hide.bs.dropdown
ព្រឹត្តិការណ៍នេះត្រូវបានបណ្តេញចេញភ្លាមៗ នៅពេលដែលវិធីសាស្ត្រលាក់វត្ថុត្រូវបានហៅ។
hidden.bs.dropdown
ព្រឹត្តិការណ៍នេះត្រូវបានបណ្តេញចេញ នៅពេលដែលការទម្លាក់ចុះបានបញ្ចប់ត្រូវបានលាក់ពីអ្នកប្រើប្រាស់ (នឹងរង់ចាំការផ្លាស់ប្តូរ CSS ដើម្បីបញ្ចប់)។
ចម្លង
$ ( '#myDropdown' ). on ( 'show.bs.dropdown' , function () {
// do something…
})