阅读更多div with images展开​​/折叠切换摘录/内容

Question

好吧，我花了一整天的时间试图找到正确的方法，但是已经做得很短，所以也许有人可以指出我正确的方向。

问题： 我有一个div“class-content”。页面上将有大约2-10个。它们中的每一个都包含来自所见即所得的输出。即包含在p标签中的文本，一些强标签，em标签甚至img标签。

我需要创建这些不会显示图像的预览/摘录版本，并将[...]附加到x字符的末尾+“更多阅读”链接。单击此按钮时，将显示包含图像的完整文章。

我见过以下内容：

1. 在x个字符后删除div的内容并添加[...] +链接。这使得内容有点脆弱，因为它可以剥离结束标记，甚至剥离图像标记的中间，导致html被输出。

2. 更改内容元素的高度，并溢出：隐藏;。这可能导致图像溢出开箱 - 其中部分内部，甚至根据线高与内容高度切割一半。这使得js非常依赖css。

3. 使用前x个字符创建新的内容元素，并在短版本和长版本上切换显示无/块。这会在标记中创建2个文本实例，我更喜欢这样做。当元素扩展时，这也使得无法利用css过渡的高度。

我觉得有点奇怪，我还没能找到一个防弹插件，用于这个据说简单且经常使用的任务。但也许我只是缺少一些东西。也许我谷歌错误的条款。这个东西叫做什么？切换扩展？读 - 更多 - 读少了？显示更多？

什么被认为是最好的方法？有没有办法解决所有这些问题？

感谢您的时间

Answer 1

我认为最好的方法，如果你想要它所有的客户端是用包装div包装你的文本。

<div class="article">
  <div class="text short">
      Long Text
  </div>
  <span class="read-more">read more</span>

.text.short将设置为固定高度，例如height:100px;
    将使用删除短类的click事件设置read-more，并添加完整的类。

Js将如下所示：     

    $(document).ready(function(){

        $(".read-more").click(function(){

            var $elem = $(this).parent().find(".text");
            if($elem.hasClass("short"))
            {
                $elem.removeClass("short").addClass("full");

            }
            else
            {
                $elem.removeClass("full").addClass("short");

            }

        });
    });
    

像这样的css：

.article {
   border-bottom: 1px dotted grey;
   padding: 3px;
   margin: 2px;
}
.article .text {
   font-size: 12px;
   line-height: 17px;
   font-family: arial;
}
.article .text.short {
   height: 100px;
   overflow: hidden;
}
.article .text.full {

}
.read-more {
   cursor: pointer;
   display: inline-block;    
   font-weight: bold;
   padding: 3px;
   background-color: #06c;
   color: white;
   margin: 2px;
}

使用javascript代码，您可以将字符，图像替换为您想要的任何内容。

我为您创建了完整的工作示例，并且在jsFiddle

上看起来很棒

修改的
用jquery添加省略号。

见jsFiddle