Question

我正在尝试按下div打开div工作的引导按钮：http://getbootstrap.com/javascript/#collapse。问题是，当我点击我的按钮时，他们会显示<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>内容，但此内容会立即隐藏。

我的HTML代码：

</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>标记之前的结尾我有这个：

public static void main(String[] args) {

    System.out.println(org.apache.commons.lang3.RandomStringUtils.random(6, true, true)); 

}


static Set<String> getRandomUniqueStrings(int count, int length, boolean letters, boolean numbers){
    Set<String> rus = new HashSet<>();

    while (rus.size() < count){
        rus.add(RandomStringUtils.random(length, letters, numbers));
    }

    return rus;
}

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

那么如何让它发挥作用？我在哪里可以找到合适的崩溃插件？

PS：我正在研究谷歌浏览器。

Answer 1

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

Bootstrap崩溃显示并立即隐藏

1 个答案: