Home > Article > Web Front-end > Expanding and hiding articles on the first screen page of the mobile phone_html/css_WEB-ITnose
Expanding and hiding articles on the first screen page of the mobile phone_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:53:331497browse
本人做的是手机端的前端开发，事事处处都得从手机用户的体验着手考虑。大家都知道手机相对于pc来说要小很多，所要容纳的东西相对于pc来说也要少之又少。一些重要的东西又希望用户在打开手机网站的第一屏就能看到，这时就要尽可能地将重点呈现给用户。
内容又由文字，图片等等信息组成，如果文字过长，就显得冗余，这里就为大家介绍一个如何隐藏多余文字和展开多余文字的方法。
需要的技术支持：CSS3，一般jQuery库；
HTML代码如下：
Html代码
CSS代码如下：
Css代码
- .slideup{width:320px;height:auto;overflow:hidden;margin:0 auto;border:1px solid #fff;text-align: center;padding: 10px;background: #999;color:#fff;font-weight:bold;border-radius: 0 0 8px 8px;}
- .the_height{height: 450px;}
- .slidedown{height: auto;}
- .btn_click{display: block;width: 120px;height: 30px;position:relative;line-height:30px;margin: 10px auto;color: #fff;background: #999;text-align: center;text-decoration: none;text-indent:-1em;border-radius: 5px;}
- .arrowup:after{content: "";width: 8px;height: 8px;border: 3px double #fff;position: absolute;top: 10px;right:18px;border-width: 3px 3px 0 0;-webkit-transform:rotate(-45deg);}
- .arrowup:before{content: "";width: 6px;height: 6px;border: 1px solid #fff;position: absolute;top: 15px;right:20px;border-width: 1px 1px 0 0;-webkit-transform:rotate(-45deg);}
- .arrowdown:after{content: "";width: 8px;height: 8px;border: 3px double #fff;position: absolute;top: 8px;right:18px;border-width: 3px 3px 0 0;-webkit-transform:rotate(135deg);}
- .arrowdown:before{content: "";width: 6px;height: 6px;border: 1px solid #fff;position: absolute;top: 7px;right:20px;border-width: 1px 1px 0 0;-webkit-transform:rotate(135deg);}
js代码如下：
Js代码
- $('.btn_click').click(function(){
- var class_lists=$('.slideup').attr('class');
- var class_index=class_lists.indexOf('isdown');
- if(class_index==-1){
- $('.slideup').slideDown().addClass('isdown slidedown');
- $('.btn_click').html("收起更多").removeClass('arrowdown').addClass('arrowup');
- }else{
- $('.slideup').slideDown().addClass('the_height').removeClass('isdown slidedown');
- $('.btn_click').html("展开更多").removeClass('arrowup').addClass('arrowdown');
- }
- });
- $(document).ready(function(){
- var article_height=$('.slideup').height();
- //alert(article_height);
- if(article_height<=450){
- $('.btn_click').hide();
- $('.slideup').addClass('slidedown');
- }else{
- $('.slideup').addClass('the_height');
- }
- });
最终效果如下：
如果文字高度大于450px，就隐藏，如下：
通过点击展开更多按钮即可展开更多文字，如下：
这里也有几个重点和大家说下：
1.页面第一次加载时的状态：按照按钮的状态分，一是文章高度大于450px时，按钮隐藏；二是文章高度小于450px时，按钮显示。当按钮显示时，又分为两个状态，即为文章收起的状态和文章展开的状态；
2. CSS key analysis: .slideup: Set the initial style of the page when the page is loaded; .the_height: Set when the page is loaded, if the article height is greater than 450px, add this class; .slidedown: Set the style when the article is expanded; .btn_click: Set the initial style of the button; .arrowup:after, .arrowup:before and .arrowdown:after, .arrowdown:before are the arrow direction settings when the article is expanded and collapsed respectively;
3.js code analysis: After the HTML document is loaded, make a judgment first. If the height of the article is less than 450px, then the article will be displayed normally and the expand and collapse button will be hidden; if the height of the article is If it is greater than 450px, set the height of the article to 450px and display the expand and collapse button. Next, if the height of the article is greater than 450px, the initial state is that the excess part of the article is hidden. After clicking the button, the excess part of the article is displayed, and the state of the button changes at the same time.
This is a summary of the display and hiding of articles on the mobile phone. I hope you can share more information.