[英]Why does my external resource not work in JSFiddle?
我為可折疊元素創建了一個簡單的package ,並帶有一個選項,可以在單擊元素外部時使用屬性data-close-on-click-outside
關閉元素。 在本地它可以工作,而且如果我要將 JS 復制到 JSFiddle 它也可以工作,但是當我從 CDN 包含 JS 時,似乎沒有觸發事件偵聽器。 在這個 JSFiddle中可以看到一個例子。 為什么我的代碼在 JSFiddle 中作為 CDN 的資源包含時不起作用?
nb:我認為我的代碼沒有問題,因為它在除 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
}
編輯:想通了,請參閱下面的答案。
JSFiddle 在文件的<head>
中加載資源。 如果將此資源添加到<body>
的末尾、結束標記</body>
之前,則該資源有效。 我可以通過將腳本包裝在document.addEventListener("DOMContentLoaded", function() {});
中來更改腳本如果我希望能夠在它包含在文檔的<head>
中時使用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.