javascript - JQuery 帮助在 div 中显示更多/更少格式

Question

我在查找和创建解决方案时遇到了一个问题，该解决方案使用 JQuery 在目标 div 中设置格式来显示更多/更少的功能。在下面的代码片段中，当我填写页面的表单时，空元素会填充文本。在 150 个文本字符可见(忽略格式和标签)时，显示更多/更少功能需要启动并隐藏大于 150 个字符的链接以显示更多或更少。

我试过使用这个 http://code-tricks.com/jquery-read-more-less-example/作为基础，但我无法让该代码与其中带有标签的 div 一起使用。

<div class="search-keywords more">
    <p style="display: none;" id="searchCriteria">All records</p>
    <p style="display: inline;" id="emEnvSubclass">EM Environmental Subclass = </p>
    <p style="display: inline; font-style: italic;" id="emEnvSubclassValue">Atomsphere OR Created Greenspace OR Forests</p>
    <p style="display: inline;" id="emSourceColl"> AND EM Source/Collection = </p>
    <p style="display: inline; font-style: italic;" id="emSourceCollValue">Other OR US EPA</p>
    <p style="display: none;" id="cicesSec">null</p>
    <p style="display: none; font-style: italic;" id="cicesSecValue">null</p>
    <p style="display: none;" id="fegsEnvSubclass">null</p>
    <p style="display: none; font-style: italic;" id="fegsEnvSubclassValue">null</p>
</div>

预先感谢您的帮助!

Answer 1

更新的答案:

如果不是一定要固定在150个字符，可以根据div大小，可以用这个插件:dotdotdot.frebsite.nl

原始答案: 这是一个工作 fiddle :http://jsfiddle.net/manishie/mgz8tec0/

你需要替换:

var content = $(this).html();

与:

var content = $(this).text();

当您计算字符数时，这将去除 html 标签。