javascript - 如何向这些动态加载的卡添加引导崩溃？

Question

所以我最近一直在摆弄 symfony，现在我可以生成这些卡片，其中包含我们的常见问题解答问题和答案，我的问题是:如何向这些生成的卡片添加折叠功能？

我正在考虑做 Accordion 折叠，但是我在互联网上找不到适合我的东西。所以如果有人可以给我一些提示，告诉我如何向这些生成的卡片添加折叠。

我认为这应该是我真正需要包含的所有代码，但如果您需要任何其他内容，请告诉我

非常感谢任何帮助!

{% extends 'base.html.twig' %}

{% block scripts %}
    {{ parent() }}
    <script>
        var counter = 0;
        const content = document.getElementById('content');
        $(document).ready(function() {
        $.ajax({
            url: "http://127.0.0.1:8000/api/faq"
        }).then(function(data) {
            data.forEach(FAQ => {
                counter++;
                const card = document.createElement('div');
                card.setAttribute('class','card');
                const question = document.createElement('h3');
                question.setAttribute('id','question'+counter);
                const answer = document.createElement('p');
                answer.setAttribute('id', 'answer'+counter);

                content.appendChild(card).className = "FAQCard";
                card.appendChild(question);
                card.appendChild(answer);


                $('#question'+counter).append(FAQ.question );
                $('#answer'+counter).append(FAQ.answer );

            })

        });

    });

</script>
{% endblock %}

{% block title %}
    Ervaringsmanager
{% endblock %} 

{% block content %}
{% endblock %}

Answer 1

由于您使用的是 Bootstrap 4，因此您可以非常轻松地执行此类操作。

首先需要识别卡的trigger和body block。

假设您有一个 button 作为合拢触发器。 button 需要有 data-toggle 和 data-target 数据属性。见下文，

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible</button>

卡片的折叠/展开主体 block 需要有id和class，需要匹配data-target和data-toggle，分别与上面的触发器。

<div id="demo" class="collapse">
    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.
</div>

一个例子， https://codepen.io/anjanasilva/pen/LXGEgK

动态应用，

使用 $(element).data('toggle', 'collapse'); 和 $(element).data('target', '#ID'); 用于那些折叠触发器。对于正文，以元素为目标添加添加类 collapse，如下所示 $(element).addClass('collapse');。

希望对您有所帮助，

干杯..