使用javascript动态添加Bootstrap 4可折叠div

Question

我想将collapsible div添加到我正在动态创建的Bootstrap 4元素中。我希望单击按钮时每个类似于卡片的元素的详细信息部分切换显示/隐藏。

我已经尝试将index连接到我的forEach循环中的每个元素，但是它没有按预期生成div。

BS4元素在此页面上正确显示。 >>> https://inputforcolor.net/populateGames/testFile.html

如您所见，每个元素上的按钮都会显示，但不会显示/隐藏详细信息。

这是我正在使用的javascript函数_为了清楚起见，我缩进了要包裹在collapsible div中的部分：

Javascript

function populateGamesOutput(games) {                            
    let imageFolder = "media/retrocards/";
    let buffer = $("<div></div>").addClass("horizBuffer");


    games.forEach(function(game, index) {                    
        let gameContainer = $("<div></div>").addClass("col-md-3 col-sm-6 padBox");
        let gameBox = $("<div></div>").addClass("gameBox center");       

        gameBox.append($("<img>").attr("src", imageFolder + game.image).attr("alt", game.fullName));
        gameBox.append(buffer);

        gameBox.append($("<button></button>").addClass("btn btnDetails btn-sm")
            .attr("type", "button").attr("data-toggle", "collapse").attr("data-target", "#details"+index));

        gameBox.append($("<div></div>").addClass("collapse").attr("id", "details"+index));

            gameBox.append($("<div></div>").addClass("center")
            .append($("<span></span>").addClass("fontBrand1 smallText").text(game.genres.join(" - "))));

            gameBox.append(buffer);

            gameBox.append($("<div></div>").addClass("left padBox")
             .append($("<span></span>").addClass("fontBlack text").text(game.details)));

            gameBox.append("<hr />");

            gameBox.append($("<div></div>").addClass("center")
             .append($("<span></span>").addClass("fontBlack smallText").text(game.platforms.join(" - "))));

        gameContainer.append(gameBox);                    
        $("#displayGames").append(gameContainer);
   });                
} 

[如果有人可以告诉我我在做什么错，那太好了：）

提前感谢

Answer 1

$（“＃details” + index）.collapse（options）将您的内容激活为可折叠元素。https://getbootstrap.com/docs/4.3/components/collapse/#collapseoptions