如何解决为什么我的外部资源在 JSFiddle 中不起作用?
我为可折叠元素创建了一个简单的 package,其中包含一个选项,当在元素外部单击时使用属性 data-close-on-click-outside
关闭该元素。在本地它可以工作,而且如果我将 JS 复制到 JSFiddle 中它可以工作,但是当我从 CDN 包含 JS 时,事件侦听器似乎没有被触发。在 this JSFiddle 中可以看到一个示例。 为什么我的代码在 JSFiddle 中作为 CDN 中的资源包含时不起作用?
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
}
编辑:想通了,请参阅下面的答案。
解决方法
JSFiddle 加载文件 <head>
中的资源。如果将此资源添加到 <body>
的末尾、结束标记 </body>
之前,则该资源有效。如果我希望能够在包含在文档的 document.addEventListener("DOMContentLoaded",function() {});
中时使用它,我可以通过将它包装在 <head>
中来更改脚本。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。