时间戳

首页 > 解决方案 > 按钮没有响应.. JavaScript 没有扩展

javascript - 按钮没有响应.. JavaScript 没有扩展

问题描述

我是编程新手，遇到了一些困难。我不明白为什么，但是调整屏幕大小时我的按钮文本没有正确调整大小。总体 div 容器也没有调整大小以正确容纳按钮......并且该按钮需要单击两次来展开文本，但现在它根本没有展开，我不确定我改变了什么。

我是初学者，这是我第一次在 html/css 中实现 javascript，所以请记住复杂的答案，我可能不会马上理解。

完整代码的 codepen 链接在这里：

https://codepen.io/rachel-campbell/pen/xvLxLK 

#collapseMe {
display:inline-block;
width: 100%;
padding: 2rem;
font-size: 2vw;
font-weight: bolder;
box-shadow: 0 0.3em 0.3em #ccc;
transition-duration: 0.2s;
float:center;

}
button:hover {
background-color: red;
}

标签： javascripthtmlcssbutton

解决方案

为什么脚本/按钮不起作用

我只想指出你犯了什么错误，以帮助你理解你的代码出了什么问题。

在您的 codepen 中，有一些 javascript 文件被引用到不存在的文件。

<link rel="stylesheet" type="text/css" href="newmarket.css" /> <script type="text/javascript" src="newmarket.js"></script>

您需要记住，您放置在 codepen、jsfiddle 等代码游乐场中的文件需要托管在某个地方。这个丢失的 javascript 文件将使您的 javascript 的其余部分失败。

2、经常检查开发者控制台。使用 f12 启动它，您将看到所有出现的错误。只需使用开发人员控制台。我发现了一些导致您的脚本和按钮无法正常工作的问题。

当您使用 jQuery 并编写选择器时，请确保非变量或字符串用双引号或单引号括起来（但 jQuery 鼓励对字符串使用双引号）。

您$(body)导致错误，因为 body 没有被声明为变量，所以它应该是一个字符串。应该是$("body")。 https://www.w3schools.com/jquery/jquery_syntax.asp

另外，你写的y.style.margin-bottom="3rem";时候应该是y.style.marginBottom="3rem";这样 https://www.w3schools.com/jsref/prop_style_marginbottom.asp

关于按钮文本未正确调整大小

至于按钮文本大小没有正确调整大小，你应该看看德文关于 css 的回答。

至于在折叠隐藏的 div 之前需要单击 2 次的按钮

您正在使用hidden=true属性隐藏 div，但是在您的脚本中，它会检查它是否具有style="display:none;"这两种不同的东西。所以只需添加style="display:none你的<div id="collapsable" hidden=true>并删除hidden=true它就变成了：

<div id="collapsable" style="display:none;">

你应该在这里看到所有的修复： https ://codepen.io/anon/pen/VozLPg

推荐阅读