单独编写css和js文件

Question

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

有一个很好的例子。 我想要第一部分

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

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

在单独的文件中。 我将第一部分创建为 test.css，将第二部分创建为 test.js。 然后我做了

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

和

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

但没有用。 我应该怎么做？

Answer 1

在“test.css”文件中，您应该删除<style> ，与带有<script>标记的“test.js”相同。

确保文件在您的文件夹中的同一级别，然后它应该可以工作。

您还应该将其放在 css 文件的顶部：

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

}

如果它仍然不起作用，您可能需要检查代码是否正确。 您只需将所有内容放入本机 html 文件即可完成此操作。

希望这有效！

单独编写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