Я создал простой пакет для складных элементов с возможностью закрытия элемента, когда нажал вне его с атрибутом data-close-on-click-outside
. Локально это работает, и также, если бы я скопировал JS в JSFiddle, он работал бы, но когда я включаю JS из CDN, прослушиватель событий, похоже, не запускается. Пример можно увидеть в этом JSFiddle. Почему мой код не работает, если он включен как ресурс из CDN в JSFiddle?
n.b .: Я не думаю, что с моим кодом что-то не так, так как он работает везде, кроме JSFiddle (минимизированный или нет), но для полноты вот мой код:
HTML
<button data-collapsible-target="collapsible-close">Toggle me</button>
<div class="collapsible-close" data-close-on-click-outside>
This *should* close when clicked outside...
</div>
JS
document.addEventListener('click', (event) => {
const element = event.target;
const targetSelector = element.getAttribute('data-collapsible-target');
if (targetSelector !== null) {
toggleCollapse(targetSelector);
}
}, false);
const toggleCollapse = targetSelector => {
const targets = document.querySelectorAll('.' + targetSelector);
targets.forEach(target => {
if (!target.classList.contains('collapsible-show')) {
target.style.maxHeight = target.scrollHeight + 'px';
} else {
target.style.maxHeight = 0 + 'px';
}
target.classList.toggle('collapsible-show');
});
}
const closeOnClickOutsideElements = document.querySelectorAll('[data-close-on-click-outside]');
closeOnClickOutsideElements.forEach(element => hideOnClickOutside(element))
function hideOnClickOutside(element) {
const outsideClickListener = event => {
// Third checks if the element clicked isn't the toggler, which would result in a double click event that conflict each other.
if (!element.contains(event.target) && isVisible(element) && !element.classList.contains(event.target.getAttribute('data-collapsible-target'))) {
element.classList.remove('collapsible-show')
element.style.maxHeight = 0;
}
}
document.addEventListener('click', outsideClickListener)
const isVisible = elem => !!elem && !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length) // source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js
}
Изменить: разобрался, см. ответ ниже.