Question

我有一个非常简单的问题。想要使用 Bootstrap 3崩溃功能来显示某些内容但我要禁用hide功能。

因此，当我点击某个链接或按钮时，会显示一些内容，但当内容为visible时，我再次点击该链接，内容应保持可见（因此我可以突出显示内容而非隐藏在链接点击上查看示例）。

我的具体用例：

<button class="reply-link note date" data-toggle="collapse" aria-expanded="false" aria-controls="reply-form" data-target="#reply-form">reply</button>
<div id="reply-form" class="collapse media">
     reply form html code ...
</div>

我希望reply form显示reply button。单击下一个回复按钮将不会隐藏回复表单，但会将焦点添加到某个回复表单元素上。

使用 Bootstrap 3 有一些常见的方法吗？

感谢。

Answer 1

处理崩溃的shown事件以禁用（或隐藏，删除等）触发按钮..

$('#collapseExample').on('shown.bs.collapse', function () {
    $('[data-toggle=collapse]').prop('disabled',true);
});

http://www.codeply.com/go/DWOCEWVPxE

Answer 2

从HTML中删除data-toggle="collapse"。
点击显示你的崩溃div（使用JS）。

HTML：

<button class="reply-link note date" aria-expanded="false" aria-controls="reply-form" data-target="#reply-form">reply</button>
<div id="reply-form" class="collapse media">
     reply form html code ...
</div>

JS：

$(".reply-link").click(function () {
  $('.media').collapse('show');
});

当内容可见/展开时，禁用引导程序折叠隐藏功能

2 个答案:

CODEPEN