tonyair/webpack-bootstrap-ui-kit
1
0
Fork 0
mirror of https://github.com/a2nt/webpack-bootstrap-ui-kit.git synced 2024-10-22 11:05:45 +02:00
Code Issues Projects Releases Wiki Activity

[FIX]: Dropdown UI

Browse Source
This commit is contained in:
Tony Air 2022-08-25 17:36:01 +02:00
parent 7e5e80bc96
commit 453a4a2185
1 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/js/ui/dropdown.js
View File

@ -22,22 +22,22 @@ const DropdownHoverUI = ((window) => {
const Toggle = (el) => { const Toggle = (el) => {
HideAll() HideAll()
el.querySelector('.dropdown-menu').classList.toggle('show') if (el.querySelector('.dropdown-menu').classList.contains('show')) {
Hide(el)
} else {
Show(el)
}
} }
const Show = (e) => { const Show = (el) => {
e.stopPropagation()
const el = e.currentTarget
el.classList.add(...ACTIVECLS) el.classList.add(...ACTIVECLS)
el.closest('.dropdown').classList.add(...ACTIVECLS)
el.querySelector('.dropdown-menu').classList.add('show') el.querySelector('.dropdown-menu').classList.add('show')
} }
const Hide = (e) => { const Hide = (el) => {
e.stopPropagation()
const el = e.currentTarget
el.classList.remove(...ACTIVECLS) el.classList.remove(...ACTIVECLS)
el.closest('.dropdown').classList.remove(...ACTIVECLS)
el.querySelector('.dropdown-menu').classList.remove('show') el.querySelector('.dropdown-menu').classList.remove('show')
} }
@ -48,8 +48,14 @@ const DropdownHoverUI = ((window) => {
const hoverableEls = document.querySelectorAll('[data-bs-toggle="hover"]') const hoverableEls = document.querySelectorAll('[data-bs-toggle="hover"]')
const attachHoverEvents = (el) => { const attachHoverEvents = (el) => {
el.addEventListener('mouseover', Show, false) el.addEventListener('mouseover', (e) => {
el.addEventListener('mouseleave', Hide, false) e.stopPropagation()
Show(e.currentTarget)
}, false)
el.addEventListener('mouseleave', (e) => {
e.stopPropagation()
Hide(e.currentTarget)
}, false)
el.classList.add(`${NAME}-active`) el.classList.add(`${NAME}-active`)
} }