引導程序崩潰立即顯示並隱藏

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和nos我有問題的影響。

那麼如何讓它工作？我在哪裏可以找到正確的崩潰插件？

PS：我正在研究谷歌瀏覽器。

Answer 1

執行您的功能的最佳方法是通過Angularjs或jquery/javascript。不太瞭解該插件，但請嘗試添加collapse.in類到您想要顯示的div