jq 文字展开收起

//展开收起
$(".word-con").each(function () {
    var maxwidth = 70; //设置最多显示的字数
    var $text = $(this).text();
    if ($text.length > maxwidth) {
        $(this).text($text.substring(0, maxwidth));
        $(this).html($(this).html() + "..."); //如果字数超过最大字数,超出部分用...代替,并且在后面加上点击展开的链接;
    };
    $(this).next().click(function () {
        console.log(1)
        if ($(this).text() == '点击展开更多') {
            $(this).text('点击收起');
            $(this).prev().text($text);
        } else {
            if ($text.length > maxwidth) {
                $(this).prev().text($text.substring(0, maxwidth));
                $(this).prev().html($(this).prev().html() + "...");
                $(this).text('点击展开更多');
            };
        }
    });
})

1、用js 实现控制文数

2、根据按钮内容,取相反值

3、多余用...拼接

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以先选中所有需要展开收起的元素,然后对每个元素分别绑定事件,实现展开收起的效果。具体实现过程如下: 1. 给需要展开收起的元素添加一个共同的 class,比如 `expandable`。 2. 使用 jQuery 选中所有的 `.expandable` 元素,然后对每个元素分别绑定事件。 3. 在事件中使用 `slideToggle()` 方法实现展开收起的效果。 示例代码如下: ```html <!DOCTYPE html> <html> <head> <title>一个页面中有多个展开收起jq怎么实现</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> .expandable { padding: 10px; background-color: #eee; cursor: pointer; margin-bottom: 10px; } .expandable-content { display: none; padding: 10px; background-color: #fff; } </style> </head> <body> <div class="expandable"> <h3>标题1</h3> <div class="expandable-content"> <p>内容1</p> </div> </div> <div class="expandable"> <h3>标题2</h3> <div class="expandable-content"> <p>内容2</p> </div> </div> <div class="expandable"> <h3>标题3</h3> <div class="expandable-content"> <p>内容3</p> </div> </div> <script> $(document).ready(function() { $('.expandable').each(function() { $(this).click(function() { $(this).find('.expandable-content').slideToggle(); }); }); }); </script> </body> </html> ``` 在上述代码中,我们首先给需要展开收起的元素添加了 `.expandable` 这个 class,然后使用 jQuery 选中所有的 `.expandable` 元素,并对每个元素分别绑定了点击事件。在点击事件中,我们使用 `slideToggle()` 方法来实现展开收起的效果。 注意,这里使用了 `each()` 方法对每个 `.expandable` 元素进行遍历,因为这样可以确保每个元素都被绑定了点击事件。如果直接使用 `$('.expandable').click()`,则只会对第一个元素绑定事件,其他元素则无法响应点击事件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值