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

Question

我有个很简单的问题。A想使用引导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。下一步，单击“回复”按钮不会隐藏回复表单，而是将焦点添加到某些“回复表单”元素上。

有什么常见的方法吗?如何使用引导带3来完成此操作？

谢谢。

Answer 1

处理折叠的shown事件以禁用(或隐藏、删除等)触发按钮..。

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

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

Answer 2

1. 从HTML中删除data-toggle="collapse"。
2. 显示您的折叠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>

联署材料：

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

CODEPEN