Javascript HTML jquery可折叠表

我已经做了一段时间了，我不能让它按照我想要的方式运行

基本上，我需要的是一种在页面加载时保持所有“文本”单元格大小相同的方法，如果它们有更多文本，则可以在单元格中添加一个椭圆（…）。然后，当您单击带有椭圆的单元格时，它们将展开，允许您读取整个文本，而不是显示的部分

下面是我所做的一个JSFIDLE，它显示了问题：

正如您在JSFIDLE上所看到的，整个文本单元格从正常大小开始，单击时，全部消失

有没有可能让单元格开始时最小化显示一行文本，然后在单击时最大化显示其全部内容

---

感谢您的帮助。

有可能，这里有一个解决方案：

/* CSS */
.slide {
    text-overflow: ellipsis;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
}
/* JS */
      $(".slide").click(function () {
          $(this).toggleClass('slide');
      });

和工作示例：

[编辑]

---

下面是一个带有包装单元格和固定div宽度的示例，如注释所述：

我把它作为一个想法/想法扔掉

我没有使用滑块，而是使用jQuery对话框作为弹出窗口，打开时单击td/div的上下文。在mouseout上，它关闭

JS

---

我不知道如何实现您想要的功能，但是

。slideToggle（）

不是实现的方法

.slideToggle（）

基本上根据元素的显示内容隐藏或显示元素：属性设置为。因此，如果在加载页面时显示该属性，则单击后该属性将以滑动效果隐藏。您无法设置表格单元格（或行）上的高度动画，因为表格单元格上的

height

计算为

minheight

，这几乎可以实现！是否可以使您单击的幻灯片最大化。我在我的项目中添加了三个大文本，它们同时打开和关闭。此外，它似乎在某个地方成功地将我的数据列推离，使其不再对齐（除非将其最大化，然后它再次对齐）。有没有办法缩短文本列以使其再次对齐？下面是一个jsfiddle，它显示了这个问题。谢谢你的帮助！您需要将td的内容包装在一个div标记中，并给它一个宽度。。我用第二个工作示例扩展了上面的答案。谢谢你，现在这个工作很好。我只需要弄清楚如何设置td div，通过auto或percentage使用第一个td和第二个td之间的最大空间，这样它就可以根据浏览器大小调整大小。从C/Ruby背景到这一点比我想象的要难。

  $(".slide").click(function () {
      $(this).slideToggle(200);
  });

/* CSS */
.slide {
    text-overflow: ellipsis;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
}
/* JS */
      $(".slide").click(function () {
          $(this).toggleClass('slide');
      });

var popupdialog = $('#popupdialog').dialog({
    autoOpen: false,
    width: 'auto',
    height: 'auto',
    position: {my: 'top right',
               at: 'middle left',
               of: '.hidden'}
                                  });
$('.table td div').click(function(){
       popupdialog.dialog('open');
       var cloneme = $(this).clone();
       $('#popupdialog').html(cloneme);

});
$('.table td div').mouseout(function(){
       $(this).css('background-color', 'transparent');
       popupdialog.dialog('close');

});