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

【问题标题】：Disable bootstrap collapse hide function when content is visible/expanded当内容可见/展开时禁用引导折叠隐藏功能
【发布时间】：2016-09-15 18:17:00
【问题描述】：

我有一个非常简单的问题。想要使用 Bootstrap 3 collapse 功能来显示一些内容但是我想禁用 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 button 出现reply form。单击下一个回复按钮不会隐藏回复表单，而是将焦点添加到某个回复表单元素上。

有没有一些常见的方法可以使用 Bootstrap 3 做到这一点？

谢谢。

【问题讨论】：

有没有人也显示代码而不仅仅是一个问题..!!!

标签： jquery twitter-bootstrap

【解决方案1】：

从您的 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');
});

CODEPEN

【讨论】：

谢谢，这就是我想要的。

【解决方案2】：

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

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

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

【讨论】：