0
我试图让我的引导程序按钮打开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和nos我有问题的影响。
那么如何让它工作？我在哪里可以找到正确的崩溃插件？
PS：我正在研究谷歌浏览器。
[Bootstrap Modal立即消失]（http://stackoverflow.com/questions/13648979/bootstrap-modal - 立即消失） – demo
好像你需要从脚本中排除'collapse.js'，因为'bootstrap.min.js'已经有相同的逻辑 – demo
谢谢你的演示！我已经对我的代码进行了审查，并删除了collapse.js文件。现在它工作完美！ –