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

Question

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

现在我已经将面板标题硬编码为“Read Message”，但现在的要求是，当面板处于折叠状态时，面板主体中的消息的第一行应该出现作为面板标题。我使用了一个模型类，我从中呈现消息正文。我怎样才能做到这一点？
这是我的代码:
查看:

@{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++;

Answer 1

给 anchor 标签设置一个id

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

现在简单地编写一个 jquery 来在 div 类 collapsed 时为 anchor 标签设置 innertext就这样

<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>

你可以这样做，它一定会帮助你...