Bootstrap 折叠显示并立即隐藏

Question

我正在尝试使打开div 的引导按钮在此处工作：http://getbootstrap.com/javascript/#collapse。问题是当我单击我的按钮时，它们会显示 div 内容，但此内容会立即隐藏。

我的 HTML 代码：

    <div class="row">
    <div class="col-lg-offset-3 col-md-offset-3 col-sm-offset-2 col-lg-6 col-md-6 col-sm-8 col-xs-12">
        <h3 class="centered pull-left">{{ 'current.user.data'|trans }}</h3>
        <h3><button type="button" data-toggle="collapse" class="pull-right" data-target="#main-data" aria-expanded="false" aria-controls="collapseExample"><i class="fa fa-arrow-down"></i></button></h3>
        <div id="main-data" class="collapse">
            <p>{{ 'person.firstName'|trans }} : {{ user.firstName }}</p>
            <p>{{ 'person.lastName'|trans }} : {{ user.lastName }}</p>
            <p>{{ 'person.email'|trans }} : {{ user.email }}</p>
            <p>{{ 'person.birthDate'|trans }}: {{ user.bornOn ? user.bornOn|date('d-m-Y') }}</p>
            <p>{{ 'person.familySituation'|trans }}: {{ user.familySituation }}</p>
            <p>{{ 'person.profession'|trans }} : {{ user.profession }}</p>
            <p>{{ 'person.createdAt'|trans }} {{ user.createdAt ? user.createdAt|date('d-m-Y') }}</p>
        </div>
    </div>

    <div class="col-lg-offset-3 col-md-offset-3 col-sm-offset-2 col-lg-6 col-md-6 col-sm-8 col-xs-12">
        <h3 class="centered pull-left">{{ 'person.addresses'|trans }}</h3>
        <h3><button type="button" data-toggle="collapse" class="pull-right" data-target="#addresses">+</button></h3>
        <div id="addresses" class="collapse">
            {% for address in user.addresses %}
                <p class="underline">{{ 'address'|trans }} N°{{ loop.index }}</p>
                <p>{{ 'person.addresses.street1'|trans }} : {{ address.street1 }}</p>
                <p>{{ 'person.addresses.street2'|trans }} : {{ address.street2 }}</p>
                <p>{{ 'person.addresses.number'|trans }} : {{ address.number }}</p>
                <p>{{ 'person.addresses.box'|trans }} : {{ address.box }}</p>
                <p>{{ 'person.addresses.locality'|trans }} : {{ address.locality }}</p>
                <p>{{ 'person.addresses.type'|trans }} : {{ address.addressType }}</p>
            {% endfor %}
        </div>
    </div>

    <div class="col-lg-offset-3 col-md-offset-3 col-sm-offset-2 col-lg-6 col-md-6 col-sm-8 col-xs-12">
        <h3 class="centered pull-left">{{ 'person.medias'|trans }}</h3>
        <h3><button type="button" data-toggle="collapse" class="pull-right" data-target="#medias"><i class="fa fa-arrow-down"></i></button></h3>
        <div id="medias" class="collapse">
            {% for media in user.medias %}
                <p class="underline">{{ '__media__label__'|trans }} N°{{ loop.index }}</p>
                <p>{{ 'type'|trans }} : {{ media.typeMedia }}</p>
                <p>{{ 'detail'|trans }} : {{ media.detail }}</p>
            {% endfor %}
        </div>
    </div>
</div>

然后在</body>标签之前的最后我有这个：

<script src="{{ asset('static/lib/jQuery/jquery-3.1.1.min.js') }}"></script>
<script src="{{ asset('static/lib/jQuery/jquery-ui.min.js') }}"></script>
<script src="{{ asset('static/lib/bootstrap-3.3.7-dist/js/bootstrap.min.js')}}"></script>
<script src="{{ asset('static/lib/bootstrap-3.3.7-dist/js/collapse.js') }}"></script>

首先它不起作用（而且我不知道如何添加折叠功能）然后我在这里找到了一个 JS 文件：https://getbootstrap.com/2.0.4/javascript.html#collapse 并且没有我有问题的效果。

那么如何让它工作呢？我在哪里可以找到合适的折叠插件？

PS：我正在使用谷歌浏览器。

Answer 1

执行功能的最佳方法是通过 Angularjs 或 jquery/javascript。不太确定插件，但请尝试将 collapse.in 类添加到您要显示的 div 中