javascript - 如何使用Bootstrap折叠获取消息正文的第一行作为消息标题

我正在使用引导面板折叠来显示消息列表。当面板展开时，用户可以在面板主体中看到消息。

现在，我已经将面板标题硬编码为“读取消息”，但是现在的要求是，当面板处于折叠状态时，面板主体中出现的消息的第一行应显示为面板标题。我使用了一个模型类，从该模型类渲染消息正文。我该如何实现？
这是我的代码：
视图：

@{int i = 0;}
@foreach (var item in Model.MessageHeaderList)
{
 <div class="panel-group col-md-8" id="accordion_@i">
 <div class="panel panel-default" id="panel_@i">
 <div class="panel-heading" id="headingOne_@i">

  <h4 class="panel-title">
  <a class="collapsed" data-toggle="collapse" data-parent="#accordion_@i" href="#collapseOne_@i">
  Read Message
  </a>
  </h4>
  </div>
  <div id="collapseOne_@i" class="panel-collapse collapse">
  <div class="panel-body">
   @Html.Raw(item.MessageText)
  </div>
  </div>
  </div>
  </div>
}
i++;

最佳答案

为锚标记设置一个ID

<a id="Header" class="collapsed" data-toggle="collapse" data-parent="#accordion_@i" href="#collapseOne_@i">
    Read Message
</a>

现在，简单地编写一个jQuery，以在div具有类collapsed时为anchortag设置内部文本。
像这样

<div id="collapseOne_@i" class="panel-collapse collapse checkForCollaps">
  <div class="panel-body">
    @Html.Raw(item.MessageText)
  </div>
</div>

<script>
if ($(".checkForCollaps").hasClass("collapse")) {
    $('#Header').text($('.panel-body').text());
}
</script>

您可能会喜欢这样做，它将对您有一定帮助。

关于javascript - 如何使用Bootstrap折叠获取消息正文的第一行作为消息标题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36467451/