我被要求为我们的网站创建一个新的信息页面，并希望将信息放入手风琴中，以使最终用户的眼睛更容易，但是我无法将脚本放在在按钮上工作可以帮助我吗？
fyi我没有JS的经验，实际上只是HTML＆amp;CSS。
谢谢杰克
我已将脚本标签移至身体标签中，并将功能重命名为手风琴。
<style>
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
background-color: #ccc;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}
.accordion:after {
content: ' 2795'; /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
.active:after {
content: "2796"; /* Unicode character for "minus" sign (-) */
}
</style>
<head>
<div></div>Our top Delivery/Returns FAQ’s
<p>We work hard to deliver your items as quickly as possible and offer a fuss-free returns process.</p>
<p> Below are some of our top FAQ’s but if you have any further questions please contact us on +44 (0) 20 3946 3795 or help@fiorucci.com</p>
</div>
</head>
<body>
<button class="accordion" onclick="accordion()">How much is delivery?</button>
<div class="panel">
<table>
<tr>
<td>Delivery Location</td>
<td>Delivery Charge</td>
<td>Expected Delivery Timing</td>
</tr>
<tr>
<td>UK Standard Delivery</td>
<td>£3.95 (Free over £50)</td>
<td>2-3 working days</td>
</tr>
</table>
<p>We also offer international shipping to over 100 countries from our local sites for Europe and USA.</p>
<p>Please use our USA site for worldwide shipping, you can see a full list of all countries here
</p>
</div>
<button onclick="accordion()" class="accordion">How do I track my order?</button>
<div class="panel">
<p>When your order's ready to leave our warehouse we'll email to let you know. Then you can Track your order for regular updates</p>
Only just ordered? You can check your order status and contact details in My Account.</p>
Don’t forget that our couriers work ‘til 9pm so your order could arrive in the evening. If you're not in when the courier tries to deliver don't panic! You will receive a notification with further instructions</p>
</div>
<button onclick="myFunction()" class="accordion">Do I need to sign for my delivery?</button>
<div class="panel">
<p>All orders sent by DHL require a signature on delivery but this is not a named service which means that your order does not have to be signed for specifically by you.</p>
<p>We will not be liable for any lost or missing orders that have been signed for at the delivery address</p>
</div>
<button class="accordion">Can I cancel or amend my order?</button>
<div class="panel">
<p>Cancellation: We can attempt to cancel your order within 60 minutes of placing, please call us to request this on +44 (0)203 946 3795 but this can't be guaranteed. After this time we can't cancel before delivery, but you can return unworn items for free within 14 days of receiving your order.</p>
<p>If you believe that your delivery address is incorrect please call us ASAP. Address changes cannot be guaranteed however will be attempted.</p>
</div>
<button class="accordion">Do you offer weekend delivery?</button>
<div class="panel">
<p>DHL don’t deliver on weekends or bank holidays but you can divert your delivery to one of over 1,000 service points across the UK to make your delivery easy.</p>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click",
function accordion() {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
</script>
</body>
预期结果：Fe
上的ACCORION开放和关闭实际结果：CTA不操控脚本
再次感谢杰克
我已修复了您的HTML。正如皮特(Pete(在评论中提到的那样，您不应将元素放在头标签中。我还从每个按钮中删除了onclick属性，您已经在JavaScript中添加了事件侦听器。您缺少}来关闭for循环，所以我添加了它，还将您的 accordion()声明在for循环之外。
function accordion() {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
}
var acc = document.getElementsByClassName("accordion");
for (var i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", accordion);
}/* Style the buttons that are used to open and close the accordion panel */
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.accordion:hover {
background-color: #ccc;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}
.accordion:after {
content: ' 2795';
/* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
.active:after {
content: "2796";
/* Unicode character for "minus" sign (-) */
}<body>
<div>Our top Delivery/Returns FAQ’s
<p>We work hard to deliver your items as quickly as possible and offer a fuss-free returns process.</p>
<p> Below are some of our top FAQ’s but if you have any further questions please contact us on +44 (0) 20 3946 3795 or help@fiorucci.com</p>
</div>
<button class="accordion">How much is delivery?</button>
<div class="panel">
<table>
<tr>
<td>Delivery Location</td>
<td>Delivery Charge</td>
<td>Expected Delivery Timing</td>
</tr>
<tr>
<td>UK Standard Delivery</td>
<td>£3.95 (Free over £50)</td>
<td>2-3 working days</td>
</tr>
</table>
<p>We also offer international shipping to over 100 countries from our local sites for Europe and USA.</p>
<p>Please use our USA site for worldwide shipping, you can see a full list of all countries here
</p>
</div>
<button class="accordion">How do I track my order?</button>
<div class="panel">
<p>When your order's ready to leave our warehouse we'll email to let you know. Then you can Track your order for regular updates</p>
Only just ordered? You can check your order status and contact details in My Account.</p>
Don’t forget that our couriers work ‘til 9pm so your order could arrive in the evening. If you're not in when the courier tries to deliver don't panic! You will receive a notification with further instructions</p>
</div>
<button class="accordion">Do I need to sign for my delivery?</button>
<div class="panel">
<p>All orders sent by DHL require a signature on delivery but this is not a named service which means that your order does not have to be signed for specifically by you.</p>
<p>We will not be liable for any lost or missing orders that have been signed for at the delivery address</p>
</div>
<button class="accordion">Can I cancel or amend my order?</button>
<div class="panel">
<p>Cancellation: We can attempt to cancel your order within 60 minutes of placing, please call us to request this on +44 (0)203 946 3795 but this can't be guaranteed. After this time we can't cancel before delivery, but you can return unworn items for
free within 14 days of receiving your order.</p>
<p>If you believe that your delivery address is incorrect please call us ASAP. Address changes cannot be guaranteed however will be attempted.</p>
</div>
<button class="accordion">Do you offer weekend delivery?</button>
<div class="panel">
<p>DHL don’t deliver on weekends or bank holidays but you can divert your delivery to one of over 1,000 service points across the UK to make your delivery easy.</p>
</div>
</body>您说您是初学者...您听说了控制台吗？如果您打开开发人员工具栏(请参阅Chrome，Firefox，Edge，Safari的说明(，您会看到您的代码正在生成一些错误。
JS错误
首先说的是： uck offult syntaxerror：第112行的输入意外结束。事实证明，您错过了那里的一个关闭括号。" For"循环打开但未关闭。在这里，适当的凹痕有助于发现错误。
单击第一个按钮时，控制台告诉我：未介绍的Referenceerror：未定义的手风琴。我注意到您的按钮上有" on Click"属性，但也请听JS中的点击事件。最好仅使用这两种方法之一。我更喜欢最后一个。一旦我删除了OnClick物品，都可以正常工作，没有任何错误。
您的页面结构
我看到您的页面并没有真正遵守结构的标准。现在，它可能在某些浏览器中起作用，但不能保证。请查看本文的基本HTML5结构。https://www.sitepoint.com/a-basic-html5-template/
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function accordion() {
// Toggle between adding and removing the "active" class,
// to highlight the button that controls the panel
this.classList.toggle("active");
// Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}/* Style the buttons that are used to open and close the accordion panel*/
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
/*Add a background color to the button if it is clicked on
(add the .active class with JS), and when you move the mouse
over it (hover)*/
.active,
.accordion:hover {
background-color: #ccc;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}
.accordion:after {
content: ' 2795'; /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
.active:after {
content: "2796"; /* Unicode character for "minus" sign (-) */
}<head>
<div></div>Our top Delivery/Returns FAQ’s
<p>We work hard to deliver your items as quickly as possible and offer a fuss-free returns process.</p>
<p> Below are some of our top FAQ’s but if you have any further questions please contact us on +44 (0) 20 3946 3795 or help@fiorucci.com</p>
</div>
</head>
<button class="accordion" >How much is delivery?</button>
<div class="panel">
<table>
<tr>
<td>Delivery Location</td>
<td>Delivery Charge</td>
<td>Expected Delivery Timing</td>
</tr>
<tr>
<td>UK Standard Delivery</td>
<td>£3.95 (Free over £50)</td>
<td>2-3 working days</td>
</tr>
</table>
<p>We also offer international shipping to over 100 countries from our local sites for Europe and USA.</p>
<p>Please use our USA site for worldwide shipping, you can see a full list of all countries here
</p>
</div>
<button class="accordion">How do I track my order?</button>
<div class="panel">
<p>When your order's ready to leave our warehouse we'll email to let you know. Then you can Track your order for regular updates</p>
Only just ordered? You can check your order status and contact details in My Account.</p>
Don’t forget that our couriers work ‘til 9pm so your order could arrive in the evening. If you're not in when the courier tries to deliver don't panic! You will receive a notification with further instructions</p>
</div>
<button class="accordion">Do I need to sign for my delivery?</button>
<div class="panel">
<p>All orders sent by DHL require a signature on delivery but this is not a named service which means that your order does not have to be signed for specifically by you.</p>
<p>We will not be liable for any lost or missing orders that have been signed for at the delivery address</p>
</div>
<button class="accordion">Can I cancel or amend my order?</button>
<div class="panel">
<p>Cancellation: We can attempt to cancel your order within 60 minutes of placing, please call us to request this on +44 (0)203 946 3795 but this can't be guaranteed. After this time we can't cancel before delivery, but you can return unworn items for free within 14 days of receiving your order.</p>
<p>If you believe that your delivery address is incorrect please call us ASAP. Address changes cannot be guaranteed however will be attempted.</p>
</div>
<button class="accordion">Do you offer weekend delivery?</button>
<div class="panel">
<p>DHL don’t deliver on weekends or bank holidays but you can divert your delivery to one of over 1,000 service points across the UK to make your delivery easy.</p>
</div>