前端界面开发工具_string截取,收缩,显示更多,自动现出省略号

小程序前端开发视频|前端开发项目实战的视频|谷歌浏览器的前端开发工具

html 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset=”UTF-8″>
    <meta name=”description” content=””>
    <meta name=”keywords” content=””>
    <title>字符串截取,收缩,显示更多</title>
    <script type=”text/javascript” src=”jquery-1.10.1.min.js”></script>
    <script src=”http://libs.baidu.com/jquery/1.9.0/jquery.js”></script>
    <style type=”text/css”>
        p {
            width: 600px;
            background: #ddd;
            padding: 20px;
        }
        a {
            text-decoration: none;
        }
    </style>
    <script>
        $(document).ready(function () {
            //此方法只能一个收缩
            //初始化
            var $all = $(“.text_content”).html();
            var $part = $all.slice(0, 80);
            $(“.text_content”).html($part);
            //字符串长度超过80,就出现省略号
            function addx() {
                if ($all.length > 80) {
                    $(“.text_content”).html($part + “…”);
                }
            }
            addx();
            //收缩点击判断
            var Onoff = true;
            $(“.btn_more”).click(function () {
                if (Onoff) {
                    $(“.text_content”).html($all);
                    $(“.btn_more”).html(“收起”);
                    Onoff = false;
                }
                else {
                    $(“.text_content”).html($part);
                    $(“.btn_more”).html(“显示更多”);
                    addx();
                    Onoff = true;
                }
            });
        });
    </script>
</head>
<body>
    <h1>定义和用法</h1>
    <p>
        <span class=”text_content”>方法在被选元素及子元素上添加一个或多个事件处理程序。 自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了
            jQuery 代码库</span>
        <a href=”javascript:void()” class=”btn_more”>显示更多</a href=”javascript:void()”>
    </p>
</body>
</html>

前端代码开发工具免费|前端开发教学视频判断|web前端开发助理面试

» 本文来自:前端开发者 » 《前端界面开发工具_string截取,收缩,显示更多,自动现出省略号》
» 本文链接地址:https://www.rokub.com/4621.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!