rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-18 10:52:19 +01:00
Code Issues Actions Packages Releases Activity

Fix backdrop for dropdown menu on mobile (#21578)

Browse Source 
- Create backdrop only if the menu is actually open (do not create it if the show event is prevented)
- Drop the backdrop only when the corresponding menu is closed (do not remove if there is no menu to close or if the hide event is prevented)
This commit is contained in:
Pierre Vanduynslager 2017-03-18 20:41:13 -04:00 committed by Mark Otto
parent 5a5ab4c0de
commit f2f8051285
1 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
js/src/dropdown.js
View File

@ -97,16 +97,6 @@ const Dropdown = (($) => {
return false
}
if ('ontouchstart' in document.documentElement &&
!$(parent).closest(Selector.NAVBAR_NAV).length) {
// if mobile we use a backdrop because click events don't delegate
const dropdown = document.createElement('div')
dropdown.className = ClassName.BACKDROP
$(dropdown).insertBefore(this)
$(dropdown).on('click', Dropdown._clearMenus)
}
const relatedTarget = {
relatedTarget : this
}
@ -118,6 +108,17 @@ const Dropdown = (($) => {
return false
}
// set the backdrop only if the dropdown menu will be opened
if ('ontouchstart' in document.documentElement &&
!$(parent).closest(Selector.NAVBAR_NAV).length) {
// if mobile we use a backdrop because click events don't delegate
const dropdown = document.createElement('div')
dropdown.className = ClassName.BACKDROP
$(dropdown).insertBefore(this)
$(dropdown).on('click', Dropdown._clearMenus)
}
this.focus()
this.setAttribute('aria-expanded', true)
@ -166,11 +167,6 @@ const Dropdown = (($) => {
return
}
const backdrop = $(Selector.BACKDROP)[0]
if (backdrop) {
backdrop.parentNode.removeChild(backdrop)
}
const toggles = $.makeArray($(Selector.DATA_TOGGLE))
for (let i = 0; i < toggles.length; i++) {
@ -195,6 +191,12 @@ const Dropdown = (($) => {
continue
}
// remove backdrop only if the dropdown menu will be hidden
const backdrop = $(parent).find(Selector.BACKDROP)[0]
if (backdrop) {
backdrop.parentNode.removeChild(backdrop)
}
toggles[i].setAttribute('aria-expanded', 'false')
$(parent)