时间戳

首页 > 解决方案 > 当文本有限时，jQuery隐藏显示更多按钮

javascript - 当文本有限时，jQuery隐藏显示更多按钮

问题描述

我正在尝试对文本使用“显示更多/显示更少”按钮来扩展和收缩长文本/段落。该代码似乎在各个方面都运行良好。唯一的一个缺陷是，即使文本有限（比如只有 1 行），我仍然可以看到显示更多按钮。如何设置仅在显示一定数量的行或文本（例如 3 行或 50 个字或任何此类可能的限制）时才出现按钮的条件。我无法弄清楚如何做到这一点，因为我在 jQuery 中不是那么好。因此，我在这里寻求解决方案。

Codepen：[ https://codepen.io/zoomkraft/pen/ZEELQXL ][1]

在上面的示例中，尝试删除将其限制为仅 1 或 2 行的段落。显示更多按钮仍会在不需要时显示，因为没有太多可扩展的文本。对于此类有限的文本，应该隐藏。

[1]: https://codepen.io/zoomkraft/pen/ZEELQXL

更新

HTML 位于 while 循环中。

<?php while($content = $contents->fetch()){ ?>
    <div class="text-container">
        <div class="content hideContent">
            <p><?php echo $content['uc_desc']; ?></p>
        </div>
        <div class="show-more">
            <span>Show more</span>
        </div>
    </div>
<?php } ?>

标签： javascriptphpjqueryhtmlcss

解决方案

您可以在显示选项中添加另一个类吗？像这样

<div class="show-more show-option">
    <span>Show more</span>
</div>

然后直接在脚本标签中添加以下内容。

$('.content').each(function(key,value){
  var lengthofContent = $(value).text();
  if(lengthofContent.length < 200)
    $(value).siblings('show-option').hide();
});

200 的值可以根据您想要的数字进行最佳配置。

推荐阅读