个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在学习如何制作 Accordion 列表，并从 www.w3schools.com 找到了以下代码(HTML、CSS 和 JS)。如果我在本地运行代码，作为一个 .html 文件，它会按预期工作。但是，如果我将它分成三个文件，并在我的 HTML 文件中链接 CSS 和 JS 文件，则下拉列表不起作用。我是网络开发的(非常)新手，非常感谢我能为此得到的任何解释!提前致谢。
原始代码(全部在一个文档中):
<!DOCTYPE html>
<html>
<head>
<style>
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
button.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2212";
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>
<h2>Accordion with symbols</h2>
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>
<button class="accordion">Section 1</button>
<div class="panel">
<p>TEXT 1</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
<p>TEXT 2</p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>TEXT 3</p>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
</script>
</body>
</html>
以及将 CSS 和 JS 链接为单独文件的 HTML 文件:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./mystyling.css">
<title>Page TItle</title>
</head>
<body>
<script src="./myjavascript.js"></script>
<h2>Accordion with symbols</h2>
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>
<button class="accordion">Section 1</button>
<div class="panel">
<p>TEXT 1</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
<p>TEXT 2</p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>TEXT 3</p>
</div>
</body>
</html>
我的 JS 和 CSS 文件只是将 JS 和 CSS 文件复制并粘贴到其他文件(分别另存为 .js 和 .css)。
最佳答案
快速说明一下，您想在正文底部链接您的。你会希望你的 HTML 在 JavaScript 之前加载:
<script src="./myjavascript.js"></script>
</body>
第二个注释，Mozilla Developer Network比 W3 Schools 信息量更大、更可靠。您需要训练自己通过 W3 访问 MDN。
您的 js 和 css 文件位于何处？我们也可以看到它们的代码吗？
为了更有效地调试，请在浏览器中打开 html 文件并使用开发人员工具让我们知道您遇到的错误(如果有)。 option+command+j 适用于 mac 和 control+shift+j 适用于 Windows，或者只需右键单击检查元素。
关于css - 为 Accordion 列表链接 CSS 和 JS 文件 - 不作为单独的文件运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44894331/
26
4
0
我的应用程序中有一个表单，我通过以下方式声明它: = form_with model: project, remote: true, method: :put do |f| = f.select
我试图在 React 中使用 Axios 设置一个简单的帖子表单设置，但由于某种原因它似乎没有作为帖子请求发送，所以 Django 一直抛出 405 错误。 这是调用 axios 并处理表单的 rea
我无法将 xdebug 作为 Zend 扩展加载，因为 php.ini 自动放入错误的术语。 phpinfo() 中的消息是 XDEBUG NOT LOADED AS ZEND EXTENSION 我
在下面的代码中，当使用以下语句时，我能够将字符串 'fullname' 的内容写入指定目录中的文本文件:System.IO.File.WriteAllText(路径, 全名);但是，如果我将字符串路径
这个问题已经有答案了: 已关闭12 年前。 Possible Duplicate: Problem of * in Command line argument 我编写了一个小型计算器的简单尝试，它可以
有没有办法捕获 html Canvas 的内容而不是像下面的示例中那样作为数据 url？ Capture HTML Canvas as gif/jpg/png/pdf? 我想要这样做的原因是我想将 C
与 C# 中的代码约定相反，在 JML 中，代码约定只是在方法 header 中以注释形式使用的文本。那么，将它们作为注释公开不是更好吗？这样即使在编译时信息也会保留在 .class 的元数据中，与注
我正在学习 Express，并且根据文档我看到它包含一些与 Node.js 相同的功能。例如，request 和 response 据说与 Node 完全相同。 看这里: https://expres
我正在尝试使用 legendgrouptitle_text 在 python go.Scatter 上设置 legendgroup 标题，如 plotly doc 中所述: https://plotl
我正在尝试使用 pinax 开发网站。为了使用 djapian 为模型编制索引，我一直在尝试将 "manage.py index" 作为 cron 作业运行，但不断收到 pinax 错误。 “错误:没
我正在开发一个 Android 应用程序，它需要一个谷歌同步日历作为它的一部分。我无法使用 Intent 来显示 Android 日历 Activity 。它必须是应用程序的一部分。日历只占屏幕的一半
问题可能不是很具体，但我想知道如何使用 AngularJS + ASP.NET MVC 创建一个非真正的 SPA 应用程序。 我即将开始一个项目，AngularJS 非常适合前端:前端将有很多动态计算
我有一个功能可以在我的应用程序中显示即时通知，如果有人发送消息，我会向其他用户发送通知，就像您收到新消息一样。为此，我使用 Spring MVC + Stomp + WebSocket。 在我的本地/
我已经使用以下 build.gradle 文件(Gradle 版本 5.4.1)创建了一个 Spring Boot 应用程序: plugins { id 'org.springframewo
我有一个运行 Ubuntu 14.04 的 Digital Ocean Droplet (VPS)。我已经安装了s3cmd并且能够使用此命令成功运行同步: s3cmd sync --recursive
我目前使用 Sublime Text 2 进行 ColdFusion 编码。写这篇的时候 SELECT #createODBCDatetime(trim(arguments.foo))#
我定义了一个记录器实例如下: private static final Logger LOGGER = Logger.getLogger(Main.class.getName()); 我有一个要记录的
我正在尝试安装 Python 3 替代 python-mysql。我尝试使用推荐的 PyMySQL。但是在尝试迁移我的 Django 项目时，同样的错误仍然存在。 回溯: File "/home/
我正在尝试在 Ubuntu 12.04 上安装 Phusion Passenger。 当我尝试时: sudo passenger-install-apache2-module ...我明白了: sud
npm ERR! As of npm@5, the npm cache self-heals from corruption issues and data extracted from the ca
我是一名优秀的程序员,十分优秀！