jQuery Collapser 隐藏或显示 DIV 内的内容答案

【问题标题】：jQuery Collapser hide or show content inside the DIVjQuery Collapser 隐藏或显示 DIV 内的内容
【发布时间】：2016-01-20 02:54:40
【问题描述】：

我的问题与“jQuery – Collapser plugin”（http://www.aakashweb.com/jquery-plugins/collapser/）有关：-

我正在使用以下脚本来隐藏或显示 DIV 中的内容，其中 CLASS 名称为“shrink”。它工作正常。

<script type="text/javascript">
$(document).ready(function() {
    $('.shrink').collapser({
        mode: 'words',
        truncate: 80,
        ellipsis: ' ... '
    });
});
</script>

但是，在 BODY 中，我使用 javascript 打印 DIV 内的一些内容，并使用表格隐藏或显示 <tr><td><div class="shrink"></div></td></tr> 内的内容。现在，隐藏或显示内容不起作用。（下面给出示例脚本，注意：没有换行符。仅用于说明。）

<script type="text/javascript">
var dataTable = document.getElementById('Result');
var content = "<table class='tablesorter'>
<thead>
  <tr>
    <th>ID</th>
    <th>Title</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>123</td>
    <td><div class='shrink'>Some long content....</div></td>
  </tr>
</tbody>
</table>";
dataTable.innerHTML = content;
</script>

<div id="Result"></div>

另外，我尝试了一个简单的语句，如下所示。它不起作用。

var content = "<div class='shrink'>Some long content....</div>";

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您必须小心 javascript 字符串中的换行符。注意语法高亮如何在第二行停止。您必须逃避它们或连接它们。

逃跑..

var content = "<table class='tablesorter'>\
<thead>\
  <tr>\
  ....
</table>";

请注意，如果您转义换行符，\ 之后不能有任何尾随空格。

连接..

var content = "<table class='tablesorter'>"+
"<thead>"+
  "<tr>"+
  ....
"</table>";

【讨论】：

【解决方案2】：

<script type="text/javascript">
function shrink() {
  $('.shrink').collapser({
    mode: 'words',
    truncate: 80,
    ellipsis: ' ... '
  });
}
function display () {
  var dataTable = document.getElementById('Result');
  var content = "<table class='tablesorter'>
  <thead>
    <tr>
      <th>ID</th>
      <th>Title</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>123</td>
      <td><div class='shrink'>Some long content....</div></td>
    </tr>
  </tbody>
  </table>";
  dataTable.innerHTML = content;
}
setTimeout(function(){ display(); shrink(); }, 1000);
</script>

<div id="Result"></div>

【讨论】：