按钮无响应.. JavaScript 未扩展

Question

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

我是初学者，这是我第一次将 javascript 实现到 html/css 中，所以请记住复杂的答案，我可能无法立即理解。

带有完整代码的 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;
}

Answer 1

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

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

在您的 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

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

至于按钮文本大小未正确调整大小，您应该查看 Devin 关于 css 的回答。

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

您正在使用hidden=true属性隐藏 div，但是在您的脚本中它会检查它是否具有style="display:none;" 这是两件不同的事情。 因此，只需在<div id="collapsable" hidden=true>添加style="display:none <div id="collapsable" hidden=true>并删除hidden=true使其变为：

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

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

Answer 2

你的#collapseMe id 为font-size: 2vw; 这为您提供一致的平滑调整大小。 但是，由于按钮位于带有边距的卡片内，因此在较小的屏幕宽度下这没有意义。 所以使用vw单位作为你的字体大小在这里真的不是一个好的选择，如果文本在一个总是全宽的容器中会更好。

另外，bootstrap .btn 类有white-space: nowrap; 这是防止文本换行。

我建议使用静态字体大小 - 也许 1.4 左右？ 以及像这样覆盖white-space属性：

#collapseMe.btn {
  white-space: unset;
}

作为旁注，由于听起来您处于学习的开始阶段，我建议避免使用 jquery 和 bootstrap，转而使用现代 css（带有 flex 和 grid）和 vanilla javascript。 这将帮助您更好地学习基础知识并帮助您成为更好的开发人员。