html中FAQ手风琴的脚本标签不起作用

Question

我正在使用脚本标记向我制作的FAQ手风琴添加功能，并且我需要手风琴在单击时展开。每次我尝试都没发生什么，有什么问题吗?是的，我想继续使用内部脚本标签，而不是仅仅创建一个单独的JS文件。

这是代码:https://codesandbox.io/s/zealous-forest-4rgziy?file=/index.html

const toggle1 = document.getElementById("accordion-button-2");
toggle1.addEventListener("click", function() {
toggle1.ariaExpanded = "true";
});

.container {
margin: 0 auto;
padding: 0px 4rem 50px 4rem;
width: 48rem;
}
.accordion {
font-family: "Darker Grotesque", sans-serif;
}
.accordion .accordionItem {
border-bottom: 1px solid #e5e5e5;
font-family: "Darker Grotesque", sans-serif;
}
.accordion .accordionItem button[aria-expanded="true"] {
border-bottom: 1px solid #fdd133;
}
.accordion button {
position: relative;
display: block;
text-align: left;
width: 100%;
padding: 1em 0;
color: #7288a2;
font-size: 1.15rem;
font-weight: 400;
border: none;
background: none;
outline: none;
}
.accordion button:hover,
.accordion button:focus {
cursor: pointer;
color: #faf069;
}
.accordion button:hover::after,
.accordion button:focus::after {
cursor: pointer;
color: #faf069;
border: 1px solid #faf069;
}
.accordion button .accordionTitle {
padding: 1em 1.5em 1em 0;
font-family: "Darker Grotesque", sans-serif;
font-weight: 700;
color: black;
font-size: 34px;
}
.accordion button .icon {
display: inline-block;
position: absolute;
top: 18px;
right: 0;
width: 22px;
height: 22px;
border: 1px solid;
border-radius: 22px;
}
.accordion button .icon::before {
display: block;
position: absolute;
content: "";
top: 9px;
left: 5px;
width: 10px;
height: 2px;
background: currentColor;
}
.accordion button .icon::after {
display: block;
position: absolute;
content: "";
top: 5px;
left: 9px;
width: 2px;
height: 10px;
background: currentColor;
}
.accordion button[aria-expanded="true"] {
color: #fdd133;
}
.accordion button[aria-expanded="true"] .icon::after {
width: 0;
}
.accordion button[aria-expanded="true"]+.accordionContent {
opacity: 1;
max-height: 9em;
transition: all 200ms linear;
will-change: opacity, max-height;
}
.accordion .accordionContent {
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 200ms linear, max-height 200ms linear;
will-change: opacity, max-height;
}
.accordion .accordionContent p {
font-size: 1rem;
font-weight: 300;
margin: 2em 0;
}

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
<div class="container">
<div class="accordion">
<div class="accordionItem">
<button id="accordion-button-1" aria-expanded="false">
<span class="accordionTitle" id="at">
Question 1
</span>
<span class="icon" aria-hidden="true"></span>
</button>
<div class="accordionContent">
<p>Lorem ipsum</p>
</div>
</div>
<div class="accordionItem">
<button id="accordion-button-2" aria-expanded="true">
<span class="accordionTitle">
Question 2
</span>
<span class="icon" aria-hidden="true"></span>
</button>
<div class="accordionContent">
<p>Lorem ipsum</p>
</div>
</div>
</div>
</div>

Answer 1

我有两点建议:

0. 将脚本标签移动到body标签的末尾。这样，一旦文档加载，它就会运行。否则，您将无法获得对节点的引用以添加事件侦听器。
1. 使用setAttribute修改aria-expanded属性

奖励:我已经实现了一个版本，按钮切换aria-expanded属性。

const toggle1 = document.getElementById("accordion-button-2");
toggle1.addEventListener("click", function () {
let isExpanded = toggle1.getAttribute("aria-expanded") === "true";
toggle1.setAttribute("aria-expanded", !isExpanded);
});