Bootstrap 3.3.2 - 当可见内容崩溃时触发JS

问题描述：

我正在使用Twitter的Bootstrap 3“collapse”来显示和隐藏一列中的某些内容，并让另一列需要与列保持相同的高度可折叠的内容。Bootstrap 3.3.2 - 当可见内容崩溃时触发JS

在寻找有两列保持我发现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文本” 项目被点击火灾。由于页面上有许多这样的内容，因此我正在使用CSS类。但是，正如预期的那样，由于折叠后的内容实际上并没有显示“click”事件，因此该脚本并未根据需要调整列高度。它几乎相反。当单击以展开时单击折叠和缩小列（取决于单击时可见的内容）时展开列。

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

我周围搜索，看了一些解决方案，并没有成功实施任何他们。

基本上，我希望做的是调用“$（‘equalHeight。’）responsiveEqualHeightGrid（）; 。”当内容的可视性变化 - 而不是把它当使其显示或不显示的是行动点击。

任何帮助表示赞赏 - 谢谢。

答

尝试初始化你的jQuery插件等高崩溃后得到的内容可见，使用崩溃事件“shown.bs.collapse”

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

这只是轻微的编辑工作。我不得不将“.collapse-text”切换为“.collapse”，这是要显示内容的风格 - 我可以在这里重新命名我的风格，因为它们很混乱。 :) 我还添加了第二个使用崩溃事件“hidden.bs.collapse”。这一个将列缩减为隐藏的内容。所有这些都会使页面跳转一点点，但它会按照我的要求进行操作，如果一旦出现问题，我将不得不查看是否加载了大量内容。谢谢！ – TUmphress 2015-02-23 20:10:56

答

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

其中2将是列数。

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

我不知道这是什么会做 - 的所谓的函数确实工作正常 - 它是关于何时被调用。 – TUmphress 2015-02-23 20:03:20

Bootstrap 3.3.2 - 当可见内容崩溃时触发JS

相关推荐