jquery隐藏部分HTML代码

Question

我正在为网站制作一个“新闻”页面。

我只想显示第一个，比方说每条新闻的15行，这样当你登陆页面时它看起来很不错。 在第15行的末尾，我添加了一个“阅读更多”的链接，调用jquery hide / show函数来显示其余的新闻/文章。

问题是新闻内容在数据库中存储为html，当我剪切前15行时，有时div标签最终没有被正确关闭，并且它正在弄乱jquery调用。我尝试了不同的解决方案，运行一个函数来关闭未关闭的标签等，但总有一些特殊的情况会让它搞乱。

是否有任何解决方案可以纯粹基于高度隐藏html标签的一部分，而无需添加额外的标签来显示/隐藏必须隐藏的部分？

Answer 1

在容器上设置overflow:hidden以隐藏滚动条并为其指定所需的height。 （如果需要，将故事包装在另一个容器div中）

然后，当您点击“阅读更多”按钮时，只需删除height样式，即可显示整个故事。

或者更好的是，使用每次单击按钮时打开和关闭的CSS类。

.shortstory{
    height:50px;
}

$(".readmorebutton").click(function(){
    $("selector for story container").toggleClass("shortstory");
});

Answer 2

您可以考虑使用CSS来提供帮助。例如，假设文章标记看起来像，你可以将你的CSS定义设置为“max-height：15em; overflow：hidden;”，然后，当链接到'read时，用JS删除'max-height'属性更多'被点击。

Answer 3

如果您在文章中指定了一个带有overflow:hidden的课程，您只需使用jQuery切换该课程即可显示或隐藏更多文章。

的CSS：

.overflow{
    overflow:hidden;
    height:100px;
}

示例标记：

<div>
    <p class="overflow">
    </p>
    <span>Read More</span>
</div>

jQuery的：

$("someshowmorelink").click(function(){
    $(this).siblings("p").toggleClass("overflow");
});

Example on jsfiddle

Answer 4

看看jQuery Expander Plugin。

Answer 5

一种方法是可以显示X个字符： 例如：如果我的div高度是50px然后使用firebug并检查它适合多少个字符...然后使用substr（子字符串）方法并仅获取那么多字符