Question

以下脚本适用于带有可点击按钮的简单网站。单击按钮后，它会打开一些文本，当您再次单击它时，它会隐藏文本。这是通过一个功能完成的。另一个函数可以复制此按钮及其隐藏的上下文，并将其附加到“一些无用的文本”的底部。

这是我的问题：添加按钮后，可点击按钮不会显示隐藏文本。此外，按钮必须附加到现有按钮的底部，而不是“一些无用文本”的底部。

有没有人能解决我的问题？

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .accordion {
        background-color: #eee;
        color: #444;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
        transition: 0.4s;
    }

    .active, .accordion:hover {
        background-color: #ccc; 
    }

    .panel {
        padding: 0 18px;
        display: none;
        background-color: white;
        overflow: hidden;
    }
    </style>
    </head>
    <body>

    <h2>Example</h2>
    <button onclick="newSample()"">ADD</button>

    <div id="samplesinfo">
    <button class="accordion">Section 1</button>
    <div class="panel">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>    
    </div>

    <div>
        <h3>some useless text</h3>
    </div>


    <script>
    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click", function() {
            this.classList.toggle("active");
            var panel = this.nextElementSibling;
            if (panel.style.display === "block") {
                panel.style.display = "none";
            } else {
                panel.style.display = "block";
            }
        });
    }
    </script>

    <script>
      function newSample() {
        var p = document.getElementById("samplesinfo");
        var p_prime = p.cloneNode(true);
        document.getElementById("samplesinfo").parentNode.appendChild(p_prime);
      }       
    </script>

    </body>
    </html>

P.S。有没有办法让每个附加按钮都有唯一的ID？并且数字是否可以连续，因此它将是按钮1，按钮2等......

使函数与HTML / JS脚本

0 个答案: