Question

我正在使用Twitter的Bootstrap 3“崩溃”来显示和隐藏一列中的某些内容，并使另一列需要与具有可折叠内容的列保持相同的高度。

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

这适用于在内容折叠时设置页面加载时的列高。

以下是“折叠”的示例 - 页面上有多个这样的内容。

<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类，因为页面上有很多这样的类。但是，正如预期的那样，由于折叠的内容实际上还没有显示“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

2 个答案: