单独编写css和js文件

Question

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_animate https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_animate

has a nice example.有一个很好的例子。 I want the first part我想要第一部分

<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}
</style>

and the javascript part和 javascript 部分

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>

in separate files.在单独的文件中。 I created the first part as test.css and the second part as test.js.我将第一部分创建为 test.css，将第二部分创建为 test.js。 I then did然后我做了

<head>
<link rel="stylesheet" href="test.css">
</head>

and和

<script src="test.js"></script>

but did not work.但没有用。 What should I have done?我应该怎么做？

Answer 1

In the 'test.css' file you should remove the <style> , same for the 'test.js' with the <script> tag.在“test.css”文件中，您应该删除<style> ，与带有<script>标记的“test.js”相同。

Make sure that the files are in the same level in your folder and then it should work.确保文件在您的文件夹中的同一级别，然后它应该可以工作。

You should also put this in the top of your css file:您还应该将其放在 css 文件的顶部：

* {
maring: 0;
padding: 0;
box-sizing: border-box;

} }

If it still doesn't work you might want to check if the code is correct.如果它仍然不起作用，您可能需要检查代码是否正确。 You can do this by just putting everyting in the native html file.您只需将所有内容放入本机 html 文件即可完成此操作。

Hope this works!希望这有效！

单独编写css和js文件

问题描述

1 个解决方案

解决方案1
0 2021-03-27 16:05:13

单独编写css和js文件

问题描述

1 个解决方案

解决方案1 0 2021-03-27 16:05:13

解决方案1
0 2021-03-27 16:05:13