diff options
| author | Johann-S <[email protected]> | 2019-05-14 11:50:10 +0200 |
|---|---|---|
| committer | Johann-S <[email protected]> | 2019-05-14 14:32:45 +0200 |
| commit | 19e86a34af40fc7352eeb0a29bf0d08267721b62 (patch) | |
| tree | 1f867b6fab6bb83c4515e65b7799c78a3b448bcd | |
| parent | fd8a651521f9b9ad5a58e0bd6969fe57777c0812 (diff) | |
| download | bootstrap-19e86a34af40fc7352eeb0a29bf0d08267721b62.tar.xz bootstrap-19e86a34af40fc7352eeb0a29bf0d08267721b62.zip | |
remove jquery references in dropdown docs
| -rw-r--r-- | site/content/docs/4.3/components/dropdowns.md | 21 |
1 files changed, 13 insertions, 8 deletions
diff --git a/site/content/docs/4.3/components/dropdowns.md b/site/content/docs/4.3/components/dropdowns.md index 4bd08f5b0..f742fe510 100644 --- a/site/content/docs/4.3/components/dropdowns.md +++ b/site/content/docs/4.3/components/dropdowns.md @@ -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. {{< 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 >}} ### 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: {{< 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 >}} {{< callout info >}} @@ -863,11 +866,12 @@ Note when `boundary` is set to any value other than `'scrollParent'`, the style | Method | Description | | --- | --- | -| `$().dropdown('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. | -| `$().dropdown('hide')` | Hides 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. | +| `toggle` | Toggles the dropdown menu of a given navbar or tabbed navigation. | +| `show` | Shows the dropdown menu of a given navbar or tabbed navigation. | +| `hide` | Hides the dropdown menu of a given navbar or tabbed navigation. | +| `update` | Updates the position of 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 @@ -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). | {{< highlight js >}} -$('#myDropdown').on('show.bs.dropdown', function () { +var myDropdown = document.getElementById('myDropdown') +myDropdown.addEventListener('show.bs.dropdown', function () { // do something... }) {{< /highlight >}} |