Bootstrap 3.3.2 - 折叠内容可见时触发 JS

Question

我正在使用 Twitter 的 Bootstrap 3 "collapse" 来显示和隐藏一栏中的一些内容，并且有另一栏需要保持与具有可折叠内容的栏相同的高度。

在寻找使两列保持相同高度的方法时，我找到了 SAM152 对此脚本的引用：https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows

当内容折叠时，这非常适合在页面加载时设置列高。

这是 "Collapse" 的示例 - 页面上有多个。

<div class="collapse-item">
<a class="collapse-text collapsed" data-toggle="collapse" href="#collapseAbout" aria-expanded="false" aria-controls="collapseAbout">About 
</a>

<div class="collapse" id="collapseAbout">
    <div>
        <p>Blah, blah, blah...</p>
    </div>
    <div class="text-center gtButton">
        <a class="gtButton" href="/About.aspx">LEARN MORE</a>
    </div>
</div>

下面的脚本在单击“.collapse-text”项目时触发。我正在使用 CSS class 因为页面上有很多这样的东西。但是，正如预期的那样，由于 "click" 事件实际上尚未显示折叠的内容，因此脚本未根据需要调整列高。它几乎是相反的。单击折叠时展开列，单击展开时缩小列（取决于单击时可见的内容）。

$('.collapse-text').on("click", function () {
            $('.equalHeight').responsiveEqualHeightGrid();
        });

我四处搜索并查看了许多解决方案，但没有成功实施其中任何一个。

基本上，我要做的是调用“$('.equalHeight').responsiveEqualHeightGrid(); " 当内容可见性改变时 - 当单击导致它显示或不显示的操作时不调用它。

感谢任何帮助 - 谢谢。

Answer 1

$('.collapse-text').on("click", function () {
        $('.equalHeight').responsiveEqualHeightGrid(2);
    });

其中 2 是列数。

$('.group-of-elements').equalHeightGrid(n); // Where n is the number of columns.

Answer 2

尝试在折叠内容可见后，使用折叠事件“shown.bs.collapse”

将您的 Jquery 插件初始化为等高

$('.collapse-text').on('shown.bs.collapse', function () {
  // Initialize here
})

Bootstrap 3.3.2 - 折叠内容可见时触发 JS

Bootstrap 3.3.2 - fire JS when content of collapse is visible

html

jquery

twitter-bootstrap-3