ទម្លាក់ចុះ
បិទ/បើកការត្រួតលើគ្នាតាមបរិបទសម្រាប់បង្ហាញបញ្ជីតំណ និងអ្វីៗជាច្រើនទៀតដោយប្រើកម្មវិធីជំនួយទម្លាក់ចុះ 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
ទៅធាតុមេ។
<!-- 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
ទៅធាតុមេ។
<!-- 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.
<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:
$('.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…
})