javascript - jQuery Collapser 隐藏或显示 DIV 内的内容

Question

我的问题与“jQuery – Collapser 插件”(http://www.aakashweb.com/jquery-plugins/collapser/)有关:-

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

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

Answer 1

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

逃避..

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

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

连接..

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