在 JS 数组中时手风琴卡问题

Question

我目前有这个列表可以正确显示数据库的每一行。问题是手风琴功能在放入 JS 数组时不起作用，但是在直接放入 HTML 时它会起作用。我对我在这里做错了什么导致它无法执行手风琴功能感到困惑。想了解为什么这不起作用以及如何解决它。谢谢

这是JS：

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

    for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
        this.classList.toggle("activeLink");
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight) {
        panel.style.maxHeight = null;
        } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
        } 
    });
    }

    $(function() {
        var records = [];
        $.getJSON('https://v1.nocodeapi.com/devmarq/airtable/RiBnzHulmTPHkgnD?tableName=JobListings&fields=company,logo,img,companyDescription,role,roleDescription,location,link,dateAdded&view=AllListings', function(data) {
            $.each(data.records, function parseJSON(i, { fields: f }) {
                var tblRow = "<tr>" + "<td>" + "<div style='padding-top: 1%; padding-bottom: 1%;'>" + "<div style='border: 1px solid black;'>" + "<button class='accordionList' style='font-size: large; outline: none;'>" + "<span style='padding-top: 2.5%; padding-bottom: 3%;'>" + "<img src='" + f.logo + "' height='30px'>" + "</span> &nbsp;<span style='padding-top: 3%; padding-bottom: 3%;'>&nbsp;&nbsp; " + f.company + " &nbsp; | &nbsp; " + f.role + " &nbsp;&nbsp; <span style='color: #2b2b2b;''><span class='iconify-inline' data-icon='eva:pin-outline' style='color: #2b2b2b;'></span> " + f.location +"</span></span>" + "</td>" + "</tr>" + "</button>" + "<div class='panel'>" + "<br>" + "<p style='color: #505050;'>Posted: " + f.dateCreated + " &nbsp; | &nbsp; Status: " + f.status + "</p>" + "<h4>About this role:</h4>" + "<p>" + f.roleDescription + "</p>" + "<h4>About " + f.company + ":</h4>" + "<p>" + f.companyDescription + "</p>" + "<br>" + "<a href='pricing.html' class='button btn btn-lg btn-block btn-sm button-black' style='padding-top: 1%; padding-bottom: 1%; width: 200px;'>Apply &nbsp; <span class='iconify-inline' data-icon='bi:arrow-right-circle' data-width='15' style='color: white;'></span></a>" + "<br>" + "</div>" + "</div>" + "</div>" + "</td>" + "</tr>"

                $(tblRow).appendTo("#userdata tbody");
            });
        });
    });
</script>

HTML:

<table id="userdata" style="width: 100%;">
    <tbody id="jobsData">
        <tr>
            <td>
                <div style="padding-top: 1%; padding-bottom: 1%;">
                    <div style="border: 1px solid black;">
                        <button class="accordionList" style="font-size: large; outline: none;">
                            <span style="padding-top: 2.5%; padding-bottom: 3%;"><img src="[LOGO]" height="30px"></span>&nbsp;<span style="padding-top: 3%; padding-bottom: 3%;">&nbsp;&nbsp; [COMPANY] &nbsp; | &nbsp; [ROLE] &nbsp;&nbsp; <span style="color: #2b2b2b;"><span class="iconify-inline" data-icon="eva:pin-outline" style="color: #2b2b2b;"></span> [LOCATION]</span></span>
                        </button>
                        <div class="panel">
                            <br>
                            <p style="color: #505050;">Posted: [DATEPOSTED] &nbsp; | &nbsp; Status: [POSTSTATUS]</p>
                            <h4>About this role:</h4>
                            <p>[ROLEDESCRIPTION]</p>

                            <h4>About [COMPANYNAME]:</h4>
                            <p>[COMPANYDESCRIPTION]</p>

                            <br>
                            <a href="pricing.html" class="button btn btn-lg btn-block btn-sm button-black" style="padding-top: 1%; padding-bottom: 1%; width: 200px;">Apply&nbsp; <span class="iconify-inline" data-icon="bi:arrow-right-circle" data-width="15" style="color: white;"></span></a>
                            <br>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

和CSS：

/* LIST STYLES */
    .accordionList {
        background-color: rgb(255, 255, 255);
        color: rgb(0, 0, 0);
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
        transition: 0.4s;
    }

    input:focus {
        outline:none !important;
    }
    
    .accordionList:hover {
        background-color: #f2f2f2;
    }
    
    .accordionList:after {
        content: url("img/expand.svg");
        font-size: 10px;
        height: 15px;
        float: right;
        margin-left: 5px;
    }
    
    .activeLink:after {
        content: url("img/close.svg");
    }
    
    .panel {
        padding: 0 18px;
        background-color: white;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
    }

Answer 1

加载页面时，JS 为元素添加事件 click (class name is : accordionList )
当您获取数据并创建新元素时（那些不添加事件 click）并且事件 click 您没有处理这些元素

您正在使用 Jquery 那么我建议您使用如下代码：（注意：我已经更改了 .panel 的类型并且记录是数据示例）

$(document).on('click', '.accordionList', function(){
  $(this).toggleClass('activeLink')
  $(this).next().toggle(200)
})

const records = [
  {
     logo: 'test',
     company : 'company',
     role: 'role',
     location: 'location',
     dateCreated: 'dateCreated',
     status : 'status',
     roleDescription: 'roleDescription',
     companyDescription: 'companyDescription'
  }
]
$.each(records, function (k, f) {
    let tblRow = "<tr>" + 
    "<td>" + 
        "<div style='padding-top: 1%; padding-bottom: 1%;'>" + 
            "<div style='border: 1px solid black;'>" + 
                "<button class='accordionList' style='font-size: large; outline: none;'>" + 
                    "<span style='padding-top: 2.5%; padding-bottom: 3%;'>" + 
                        "<img src='" + f.logo + "' height='30px'>" + 
                    "</span> &nbsp;<span style='padding-top: 3%; padding-bottom: 3%;'>&nbsp;&nbsp; " + 
                        f.company + " &nbsp; | &nbsp; " + f.role + 
                    " &nbsp;&nbsp; <span style='color: #2b2b2b;''><span class='iconify-inline' data-icon='eva:pin-outline' style='color: #2b2b2b;'></span> " + f.location +"</span></span>" + 
                "</button>" + 
                "<div class='panel'>" + "<br>" + 
                    "<p style='color: #505050;'>Posted: " + f.dateCreated + " &nbsp; | &nbsp; Status: " + f.status + "</p>" + 
                    "<h4>About this role:</h4>" + 
                    "<p>" + f.roleDescription + "</p>" + 
                    "<h4>About " + f.company + ":</h4>" + 
                    "<p>" + f.companyDescription + "</p>" + "<br>" + 
                    "<a href='pricing.html' class='button btn btn-lg btn-block btn-sm button-black' style='padding-top: 1%; padding-bottom: 1%; width: 200px;'>Apply &nbsp; <span class='iconify-inline' data-icon='bi:arrow-right-circle' data-width='15' style='color: white;'></span></a>" + 
                    "<br>" + "</div>" + 
                "</div>" + 
            "</div>" + 
        "</div>" + 
    "</td>" + 
"</tr>"
    $(tblRow).appendTo("#userdata tbody")
})

.accordionList {
        background-color: rgb(255, 255, 255);
        color: rgb(0, 0, 0);
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
        transition: 0.4s;
    }

    input:focus {
        outline:none !important;
    }
    
    .accordionList:hover {
        background-color: #f2f2f2;
    }
    
    .accordionList:after {
        content: url("img/expand.svg");
        font-size: 10px;
        height: 15px;
        float: right;
        margin-left: 5px;
    }
    
    .activeLink:after {
        content: url("img/close.svg");
    }
    
    .panel {
        padding: 0 18px;
        background-color: white;
        overflow: hidden;
        display: none
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="userdata" style="width: 100%;">
    <tbody id="jobsData">
        <tr>
            <td>
                <div style="padding-top: 1%; padding-bottom: 1%;">
                    <div style="border: 1px solid black;">
                        <button class="accordionList" style="font-size: large; outline: none;">
                            <span style="padding-top: 2.5%; padding-bottom: 3%;"><img src="[LOGO]" height="30px"></span>&nbsp;<span style="padding-top: 3%; padding-bottom: 3%;">&nbsp;&nbsp; [COMPANY] &nbsp; | &nbsp; [ROLE] &nbsp;&nbsp; <span style="color: #2b2b2b;"><span class="iconify-inline" data-icon="eva:pin-outline" style="color: #2b2b2b;"></span> [LOCATION]</span></span>
                        </button>
                        <div class="panel">
                            <br>
                            <p style="color: #505050;">Posted: [DATEPOSTED] &nbsp; | &nbsp; Status: [POSTSTATUS]</p>
                            <h4>About this role:</h4>
                            <p>[ROLEDESCRIPTION]</p>

                            <h4>About [COMPANYNAME]:</h4>
                            <p>[COMPANYDESCRIPTION]</p>

                            <br>
                            <a href="pricing.html" class="button btn btn-lg btn-block btn-sm button-black" style="padding-top: 1%; padding-bottom: 1%; width: 200px;">Apply&nbsp; <span class="iconify-inline" data-icon="bi:arrow-right-circle" data-width="15" style="color: white;"></span></a>
                            <br>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

$(document).on('click', '.accordionList', function(){
  $(this).toggleClass('activeLink')
  $(this).next().toggle(200)
})

事件 click 从 document 到 .accordionList

更新格式化您的 html 结构：

在 JS 数组中时手风琴卡问题

Accordion card issue when inside JS array

html

javascript

css

arrays

json