为什么我的外部资源在 JSFiddle 中不起作用？

Question

I have created a simple package for collapsible elements with an option to close the element when clicked outside of it with an attribute data-close-on-click-outside .我为可折叠元素创建了一个简单的package ，并带有一个选项，可以在单击元素外部时使用属性data-close-on-click-outside关闭元素。 Locally it works, and also if I were to copy the JS into JSFiddle it works, but when I include the JS from a CDN, the event listener does not seem to be triggered.在本地它可以工作，而且如果我要将 JS 复制到 JSFiddle 它也可以工作，但是当我从 CDN 包含 JS 时，似乎没有触发事件侦听器。 An example can be seen in this JSFiddle .在这个 JSFiddle中可以看到一个例子。 Why does my code not work when included as a resource from a CDN in JSFiddle?为什么我的代码在 JSFiddle 中作为 CDN 的资源包含时不起作用？

nb: I do not think there is something wrong with my code, as it works everywhere except on JSFiddle (minified or not), but for completeness here is my code: nb：我认为我的代码没有问题，因为它在除 JSFiddle 之外的任何地方都可以使用（无论是否缩小），但为了完整起见，这是我的代码：

HTML 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 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
}

Edit: figured it out, see answer below.编辑：想通了，请参阅下面的答案。

Answer 1

JSFiddle loads the resource in the <head> of the file. JSFiddle 在文件的<head>中加载资源。 This resource works if it is added at the end of the <body> , before the closing tag </body> .如果将此资源添加到<body>的末尾、结束标记</body>之前，则该资源有效。 I could change the script by wrapping it in document.addEventListener("DOMContentLoaded", function() {});我可以通过将脚本包装在document.addEventListener("DOMContentLoaded", function() {});中来更改脚本if I wanted to be able to use in when it is included in the <head> of the document.如果我希望能够在它包含在文档的<head>中时使用。

为什么我的外部资源在 JSFiddle 中不起作用？

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-01-04 11:59:46

为什么我的外部资源在 JSFiddle 中不起作用？

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-01-04 11:59:46

解决方案1
0 已采纳 2021-01-04 11:59:46