如何解决此JavaScript手风琴错误？

Question

I have been asked to create a new information page for our website and would like to place the information in an accordion to make it easier on the end users eye however I cannot get the script to work on the buttons could someone help me, please? 我被要求为我们的网站创建一个新的信息页面，并希望将这些信息放进手风琴中，以使其在最终用户眼中变得更容易，但是我无法在按钮上使用该脚本，有人可以帮助我吗？

FYI I have no experience with JS and am really just a beginner with HTML & CSS. 仅供参考，我没有JS经验，实际上只是HTML和CSS的初学者。

Thanks, Jack 谢谢杰克

I have moved the script tag into the body tag and have renamed the function to the accordion. 我已将脚本标签移至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>

Expected result: Open and closing of accorion on FE 预期结果：有限元打开和关闭

Actual result: CTA doesnt action accordion script 实际结果：CTA不操作手风琴脚本

Thanks again, Jack 再次感谢，杰克

Answer 1

I have fixed your HTML. 我已经修复了您的HTML。 As Pete mentions in a comment, you should not put elements in the head tag . 正如Pete在评论中提到的那样，您不应将元素放在head标签中。 I have also remove the onclick attributes from each button, you are already adding event listeners in your javascript. 我还从每个按钮中删除了onclick属性，您已经在JavaScript中添加了事件监听器。 You were missing a } to close the for loop so I have added that in and also pulled your accordion() declaration outside of the for loop. 您缺少}来关闭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>

Answer 2

You say you are a beginner... have you heared of the console? 您说您是初学者...您听说过控制台吗？ If you open up the developer toolbar (see instructions for Chrome , FireFox , Edge , Safari ) you will see your code was generating some errors. 如果打开开发人员工具栏（请参阅Chrome ， FireFox ， Edge ， Safari的说明），您将看到代码正在生成一些错误。

The JS errors JS错误

First of all it stated: Uncaught SyntaxError: Unexpected end of input at line 112. It turns out you missed a closing bracket there. 首先说明： Uncaught SyntaxError：第112行的输入意外结束。事实证明您错过了此处的右括号。 The "for" loop was opened but not closed. “ for”循环已打开，但未关闭。 This is where proper indentations helps a lot to spot mistakes. 在这里，适当的缩进有助于发现错误。

When clicking the first button, console tells me: Uncaught ReferenceError: accordion is not defined . 单击第一个按钮时，控制台会告诉我： Uncaught ReferenceError：未定义手风琴 。 I notice you have 'onclick' attributes on the buttons, but also listen to the click events in JS. 我注意到您在按钮上具有“ onclick”属性，但是还监听JS中的click事件。 It is best to only use one of these two methods. 最好仅使用这两种方法之一。 I prefer the last one. 我喜欢最后一个。 Once I removed the onclick items all worked fine without any errors. 删除onclick项后，所有功能均正常运行，没有任何错误。

Your page structure 您的页面结构

I see your page does not really adhere to standards as far as structure. 我看到您的页面在结构上并没有真正遵守标准。 As it is now, it might work in some browsers, but there's no guarantee. 到目前为止，它可能在某些浏览器中可用，但不能保证。 Have a look at this article for a basic html5 structure. 看一下本文的基本html5结构。 https://www.sitepoint.com/a-basic-html5-template/ 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>

如何解决此JavaScript手风琴错误？

问题描述

2 个解决方案

解决方案1
0 2019-06-27 10:56:07

解决方案2
0 2019-06-27 11:01:51

如何解决此JavaScript手风琴错误？

问题描述

2 个解决方案

解决方案1 0 2019-06-27 10:56:07

解决方案2 0 2019-06-27 11:01:51

解决方案1
0 2019-06-27 10:56:07

解决方案2
0 2019-06-27 11:01:51