為什么這段代碼在jsfiddle中不起作用
[英]Why does this code doesn't work in jsfiddle
問題描述
我試圖使此代碼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>
2 個解決方案
解決方案1
4 已采納 2017-01-07 21:33:12
問題是因為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 。
解決方案2
1 2017-01-07 21:47:12
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用作參考。 他們的教程通常是過時的-從上面的改進中可以看到-有時它們甚至是完全錯誤的，並且傳播不正確的信息。
為什么JSBin不顯示閉包，而JSFiddle卻顯示相同的代碼？
[英]Why doesn't JSBin show closure, while JSFiddle does for the same code?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.