mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-19 11:51:23 +02:00
Code Issues Releases Wiki Activity

remove jquery references in dropdown docs

Browse Source
This commit is contained in:
Johann-S
2019-05-14 11:50:10 +02:00
parent fd8a651521
commit 19e86a34af
1 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
site/content/docs/4.3/components/dropdowns.md
View File

@@ -774,7 +774,7 @@ Use `data-offset` or `data-reference` to change the location of the dropdown.
Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.show` class on the parent list item. The `data-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it. Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.show` class on the parent list item. The `data-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.
{{< callout info >}} {{< callout info >}}
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](https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html), 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. On touch-enabled devices, opening a dropdown adds empty `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](https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html), 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.
{{< /callout >}} {{< /callout >}}
### Via data attributes ### Via data attributes
@@ -797,7 +797,10 @@ Add `data-toggle="dropdown"` to a link or button to toggle a dropdown.
Call the dropdowns via JavaScript: Call the dropdowns via JavaScript:
{{< highlight js >}} {{< highlight js >}}
$('.dropdown-toggle').dropdown() var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
{{< /highlight >}} {{< /highlight >}}
{{< callout info >}} {{< callout info >}}
@@ -863,11 +866,12 @@ Note when `boundary` is set to any value other than `'scrollParent'`, the style
| Method | Description | | Method | Description |
| --- | --- | | --- | --- |
| `$().dropdown('toggle')` | Toggles the dropdown menu of a given navbar or tabbed navigation. | | `toggle` | Toggles the dropdown menu of a given navbar or tabbed navigation. |
| `$().dropdown('show')` | Shows the dropdown menu of a given navbar or tabbed navigation. | | `show` | Shows the dropdown menu of a given navbar or tabbed navigation. |
| `$().dropdown('hide')` | Hides the dropdown menu of a given navbar or tabbed navigation. | | `hide` | Hides the dropdown menu of a given navbar or tabbed navigation. |
| `$().dropdown('update')` | Updates the position of an element's dropdown. | | `update` | Updates the position of an element's dropdown. |
| `$().dropdown('dispose')` | Destroys an element's dropdown. | | `dispose` | Destroys an element's dropdown. |
| `_getInstance` | *Static* method which allows you to get the dropdown instance associated with a DOM element |
### Events ### Events
@@ -882,7 +886,8 @@ All dropdown events are fired at the `.dropdown-menu`'s parent element and have
| `hidden.bs.dropdown`| This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete). | | `hidden.bs.dropdown`| This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete). |
{{< highlight js >}} {{< highlight js >}}
$('#myDropdown').on('show.bs.dropdown', function () { var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something... // do something...
}) })
{{< /highlight >}} {{< /highlight >}}