javascript - 忽略 div 内的标签，直到被点击

Question

我有以下功能，如果单击标签，它会在 tr 标签内展开文字换行文本。

$(document).ready(function () {
    $('tr').click(function () {
        var $this = $(this);
        if($this.css('white-space') === 'nowrap') {
            $this.css('white-space', 'normal');
        }
        else {
            $this.css('white-space', 'nowrap');
        }
    });
});

我正在使用此函数，因为我希望表格单元格中的文本仅显示在一行中(实质上隐藏内部 p 标记)，直到被用户单击。然而，问题是 nowrap 为 br 和 p 标记换行，我有几个这样的标记用于格式化。仅当单击 tr 时，如何才能打开这些标签？

html:

<td>
   <div>
       {{ post.person }}
          <p>
              Message:
              <br>
              {{ post.message }}
          </p>
   </div>
</td>

Answer 1

您可以为您的 div 添加最大高度(1.2em 是相对于字体大小的默认行高)并设置 overflow: hidden。然后你只会看到 1 行。单击后，切换另一个设置 overflow: visible 和 height: auto 的类。

$(document).ready(function() {
  $('tr').click(function() {
    var $this = $(this);
    $(this).find(".a").toggleClass("expand");
  });
});

.a{
  height: 1.2em;
  overflow: hidden;
}

.expand{
  height: auto;
  overflow: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div class="a">
        {{ post.person }}
        <p>
          Message:
          <br> {{ post.message }}
        </p>
      </div>
    </td>
  </tr>
</table>