Question

我有使用bootstrap进行折叠的代码，如下所示：

<a href="javascript:void(0)" data-toggle="collapse" data-target="#foo">Edit</a>

<div id="foo" class="collapse">
some text.
</div>

<button type="button" class="continue">Continue</button>

如何在foo崩溃时启用继续按钮，并在foo崩溃时不可用？

Answer 1

根据official documentation，bootstrap中的崩溃插件会触发几个可以挂钩的事件。

我们感兴趣的是shown.bs.collapse和hidden.bs.collapse。当foo分别折叠或折叠时，它们会触发。

Now we just have to hook onto the events.

$('#foo').on('hidden.bs.collapse', function () {
    $('.continue').attr('disabled', 'disabled');
});

$('#foo').on('shown.bs.collapse', function () {
    $('.continue').removeAttr('disabled');
});

Answer 2

首先，您需要包含bootstrap.min.css和bootstrap.min.js 试试这个

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

<div id="demo" class="collapse"> This is testing demo div</div>

Answer 3

为什么不自己创建它？这对经验来说更好。

$(document).ready(function(){
    $('.button').on('click'){
        $('selected-div').slideToggle(); 
    }
});

div崩溃时启用/禁用按钮

3 个答案: