使用 Bootstrap 时，为什么我的一些元素随机不折叠？答案

【问题标题】：When using Bootstrap, why are some of my elements randomly not collapsing?使用 Bootstrap 时，为什么我的一些元素随机不折叠？
【发布时间】：2016-07-08 13:41:04
【问题描述】：

我的 Web 表单网站上有几个折叠块。我正在使用 Bootstrap 来折叠它们，如下所示：

<div class="span<%# CurrentBlock.Span > 0 ? CurrentBlock.Span.ToString() : "12" %> info-link-header info-link-header-title expandable-link-heading" data-toggle="collapse" data-target="#<%# ContentId %>" style="position: relative;">
    <!--some content-->
<div class="expandable-container collapse" id="<%# ContentId %>"><!--some more content--></div>

这是此文件的代码隐藏：

    protected void Page_Load(object sender, EventArgs e)
    {
        this.DataBind();
        //some other code
    }

由于调用了 DataBind()，我假设代码块应该获得正确的值。我遇到的问题是，当我单击要展开的 div 时，类属性无法生成“折叠”-它只显示“折叠”，因此当我在 Chrome 开发工具中检查它时会呈现我的内容，但它不可见。在 Chrome 开发工具中添加“折叠”可以解决问题，但我当然需要自动发生这种情况。更令人困惑的是，当我在本地构建它时，我的块每次都正确展开/折叠；在需要时添加“折叠”，并在需要时恢复为“折叠”。当我发布到我们的开发服务器时，“折叠”随机无法生成。我怎样才能解决这个问题？谢谢！

【问题讨论】：

标签： asp.net twitter-bootstrap angularjs-bootstrap

【解决方案1】：

我刚刚回答了这个问题。这背后的问题是我的包含 data-target 属性的 div 正在使用 C# 属性来获取唯一的 ID 值。该值是通过在 DateTime.Now 上生成毫秒并将其用作折叠 div 上的 id 属性的值以及顶部 div 上的 data-target 的值来创建的。在比我自己的机器更快的机器上，比如开发服务器，我假设代码运行得足够快，可以在页面上的 2 或 3 个 div 上获得相同的毫秒值，这会在 id 属性中创建相同的值。 Id 属性中的相同值破坏了 DOM，并隐藏了我的内容。

解决方案：我创建了一个 GUID 对象来填充“ContentId”属性，它为 id 属性创建了唯一值并保持 DOM 完整。

【讨论】：