BOOS信息展示与收缩

Posted on Edited on In

BOOS直聘：最近在找工作，用BOOS直聘，感觉用户体验很好，看到那个显示部分信息，就想用原生写写看看。

展示效果

Demo

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<div class="container">
    <div class="page">
        <div class="con-text">
            <div class="job-text">
                <div class="job-top color1">
                    <span>职位描述</span>
                    <i class="weui_icon_checked"></i>
                </div>
                <div id="text-mian" class="job-main">
                你好忙
                </div>
                <div id="Btns" class="job-bot color1">显示全部</div>
            </div>
        </div>
        <div class="con-text">
            <div class="job-text">
                <div class="job-top color1">
                    <span>职位描述</span>
                    <i class="weui_icon_checked"></i>
                </div>
                <div id="text-mians" class="job-main">                    
                    1.参与产品的前端开发，与后端工程师协作，高质高效完成产品的数据交互、动态信息展现；<br />
                    2.提升产品的用户体验、前端性能以及团队的开发效率；<br />
                    3.研究和探索创新的开发思路和前沿的前端技术，应用到团队与产品中。<br />

                    1.熟练掌握各种Web前端技术（HTML/CSS/Javascript）和跨浏览器、跨终端的开发；<br />
                    2.深刻理解Web标准，对前端性能、可访问性、可维护性等相关知识有实践的了解和实践经验；<br />
                    3.熟悉HTML5，前沿JS类库和MVC框架者优先；<br />
                    4.熟练使用一门非前端脚本语言（如：NodeJS、Python、PHP等），并有实践项目；<br />
                    5.在博客或GitHub上有技术沉淀者优先； 
                </div>      
                <div id="Btnss" class="job-bot color1">显示全部</div>
            </div>
        </div>
        <div class="Bottom"></div>
    </div>
    <div class="con-bot">
        <div class="Bleft">
            <a href="javascript:;"><i></i><span>+收藏</span></a>
        </div>
        <div class="Bright">
            <a href="javascript:;"><i></i><span>立即沟通</span></a>
        </div>
    </div>
</div>

<div class="sidebar-section">
    <div class="section-detail">
        <p class="text-center shop-detail"><strong>手机扫码访问</strong></p>
        <p class="text-center weixin-title">微信“扫一扫”分享到朋友圈</p>
        <p class="text-center qr-code">
            <img width="140" height="140" src="images/create.png">
        </p>
    </div>
</div>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function TextShow(ID,Btns){
    var DivT = document.getElementById(ID);
    var Texts = DivT.innerHTML;
    var NewT = document.createElement("div");
    var Btn = document.getElementById(Btns);

    // 判断页面文字
    if(Texts.length < 200){
        Btn.style.display = "none";
    }else{
        NewT.innerHTML = Texts.substring(0,200) + "……";
        Btn.innerHTML = Texts.length > 200 ? "显示全部" : "";

        Btn.onclick = function(){
            if(Btn.innerHTML == "显示全部"){
                Btn.innerHTML = "收起";
                NewT.innerHTML = Texts;
            }else{
                Btn.innerHTML = "显示全部";
                NewT.innerHTML = Texts.substring(0,200) + "……";
            }
        }
        DivT.innerHTML = "";
        DivT.appendChild(NewT);
    }
}
//文字部分显示：文字、按钮
TextShow("text-mian","Btns");
TextShow("text-mians","Btnss");