Question

我试图让这段代码http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_accordion适用于jsfiddle https://jsfiddle.net/u6qdfw5f/但这不起作用？

    db.articles.aggregate(
        [ { 
            $match : { date : userSelectedDate }, { else : elseSelection} 
        } ]
    );

Answer 1

问题是因为CSS未加载。如果您检查控制台，则会看到GET https://www.w3schools.com/lib/w3.css net::ERR_INSECURE_RESPONSE之类的错误。在小提琴的右上部添加CSS。

这是因为该链接包含https而w3schools网站没有安全证书。如果您尝试在浏览器上访问https://www.w3schools.com/lib/w3.css，则会收到隐私错误。添加http代替https，它可以在浏览器中使用。

http文件无法在jsfiddle https中使用，因为它被认为是不安全的。您将在控制台中收到错误，如：

Mixed Content: The page at 'https://jsfiddle.net/u6qdfw5f/1/' was loaded over HTTPS, but requested an insecure stylesheet 'http://www.w3schools.com/lib/w3.css'. This request has been blocked; the content must be served over HTTPS.

我还从javascript下拉列表中添加了javascript加载类型为No wrap - in <head>，而不是默认的onLoad，否则会出现Uncaught ReferenceError: myFunction is not defined

之类的错误

更新了 FIDDLE 。

Answer 2

JS代码无法解决的主要问题是因为您已经设置了“加载类型”＆＃39;在document.ready触发时执行的设置中。这意味着myFunction()定义不在调用onclick属性的范围内。

其次，外部文件列表中的w3.css文件路径不正确。您使用https://但W3Schools网站没有SSL证书，因此请求失败。您应该使用http://链接。

通过这些更改，代码可以正常运行：Updated fiddle

但是，您应该注意到W3Schools示例中的代码有点过时了。要遵循现代最佳做法，您应该在on*属性上使用不显眼的事件处理程序，并且您还可以使用classList来打开和关闭类，而无需if语句。试试这个更新版本：

＆＃13;

document.querySelectorAll('.w3-btn-block').forEach(function(el) {
  el.addEventListener('click', function() {
    var x = document.getElementById(this.dataset.target);
    x.classList.toggle('w3-show');
  })
})

＆＃13;

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" />

<div class="w3-accordion w3-light-grey">
  <button data-target="Demo1" class="w3-btn-block w3-left-align">
    Open Section 1
  </button>
  <div id="Demo1" class="w3-accordion-content w3-container">
    <p>Some text..</p>
  </div>
  <button data-target="Demo2" class="w3-btn-block w3-left-align">
    Open Section 2
  </button>
  <div id="Demo2" class="w3-accordion-content w3-container">
    <p>Some text..</p>
  </div>
</div>

＆＃13;

或者，当您使用jQuery标记问题时，您可以使用：

＆＃13;

$('.w3-btn-block').click(function() {
  var x = $(this.dataset.target);
  x.toggleClass('w3-show');
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" />

<div class="w3-accordion w3-light-grey">
  <button data-target="#Demo1" class="w3-btn-block w3-left-align">
    Open Section 1
  </button>
  <div id="Demo1" class="w3-accordion-content w3-container">
    <p>Some text..</p>
  </div>
  <button data-target="#Demo2" class="w3-btn-block w3-left-align">
    Open Section 2
  </button>
  <div id="Demo2" class="w3-accordion-content w3-container">
    <p>Some text..</p>
  </div>
</div>

＆＃13;

另请注意，我强烈建议您不要使用W3Schools作为参考。他们的教程经常过时 - 正如您从上述改进中可以看到的那样 - 有时他们甚至完全错误并传播不正确的信息。

如果您想要一个很好的JS代码参考，请使用MDN，对于jQuery，请使用official documentation

为什么这段代码在jsfiddle中不起作用

2 个答案: