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

Question

我试图使此代码http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_accordion在jsfiddle https://jsfiddle.net/u6qdfw5f/上有效，但是为什么不起作用？

    <!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>

<div class="w3-container">
<h2>Accordions</h2>
<p>An accordion is used to show (and hide) content that is broken into sections:</p>

<div class="w3-accordion w3-light-grey">
    <button onclick="myFunction('Demo1')" class="w3-btn-block w3-left-align w3-show">Open Section 1</button>
    <div id="Demo1" class="w3-accordion-content w3-container w3-show">
    <h4>Section 1</h4>
    <p>Some text..</p>
    </div> 
    <button onclick="myFunction('Demo2')" class="w3-btn-block w3-left-align w3-show">Open Section 2</button>
    <div id="Demo2" class="w3-accordion-content w3-container w3-show">
    <h4>Section 2</h4>
    <p>Some other text..</p>
    </div>
</div>
</div>

<script>
function myFunction(id) {
    var x = document.getElementById(id);
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else { 
        x.className = x.className.replace(" w3-show", "");
    }
}
</script>

</body>
</html>

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的错误Uncaught ReferenceError: myFunction is not defined

更新了FIDDLE 。

Answer 2

JS代码无法正常工作的主要问题是，您已经设置了“加载类型”以在document.ready触发时执行。 这意味着myFunction()定义不在调用onclick属性的范围内。

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

完成这些更改后，代码将起作用： 更新了小提琴

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

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

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

另外，当您使用jQuery标记问题时，可以使用以下代码：

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

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

另请注意，我强烈建议您不要将W3Schools用作参考。 他们的教程通常是过时的-从上面的改进中可以看到-有时它们甚至是完全错误的，并且传播不正确的信息。

如果您想为JS代码提供良好的参考，请使用MDN ，对于jQuery，请使用官方文档

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

问题描述

2 个解决方案

解决方案1
4 已采纳 2017-01-07 21:33:12

解决方案2
1 2017-01-07 21:47:12

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

问题描述

2 个解决方案

解决方案1 4 已采纳 2017-01-07 21:33:12

解决方案2 1 2017-01-07 21:47:12

解决方案1
4 已采纳 2017-01-07 21:33:12

解决方案2
1 2017-01-07 21:47:12