我被要求为我们的网站创建一个新的信息页面，并希望将信息放入手风琴中，以使最终用户更容易理解，但是我无法让脚本在按钮上起作用，有人可以帮我吗， 请？
仅供参考，我没有JS经验，实际上只是HTML和CSS的初学者。
谢谢， 杰克
我已将脚本标签移至body标签，并将功能重命名为手风琴。
<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: '\02795'; /* 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不操作手风琴脚本
再次感谢， 杰克
答案 0 :(得分：0)
我已修复您的HTML。正如Pete在评论中提到的那样，您不应将元素放在head tag中。我还从每个按钮中删除了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: '\02795';
/* 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>
答案 1 :(得分：0)
您说您是初学者...您听说过控制台吗？ 如果打开开发人员工具栏（请参见Chrome，FireFox，Edge，Safari的说明），您将看到代码正在生成一些错误。
JS错误
首先说明： 未捕获的语法错误：在第112行的输入意外结束。 事实证明，您错过了一个右括号。 “ for”循环已打开，但未关闭。在这里，适当的缩进有助于发现错误。
单击第一个按钮时，控制台会告诉我： 未捕获的ReferenceError：未定义手风琴 。 我注意到您在按钮上具有“ onclick”属性，但是还监听JS中的click事件。最好仅使用这两种方法之一。我喜欢最后一个。 删除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: '\02795'; /* 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>