Expanding and hiding articles on the first screen page of the mobile phone_html/css_WEB-ITnose

CSS代码如下：

Css代码  

1. .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;}  
2. .the_height{height: 450px;}  
3. .slidedown{height: auto;}  
4. .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;}  
5. .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);}  
6. .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);}  
7. .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);}  
8. .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代码  

1. $('.btn_click').click(function(){  
2.     var class_lists=$('.slideup').attr('class');  
3.     var class_index=class_lists.indexOf('isdown');  
4.     if(class_index==-1){  
5.     $('.slideup').slideDown().addClass('isdown slidedown');  
6.     $('.btn_click').html("收起更多").removeClass('arrowdown').addClass('arrowup');  
7. }else{  
8.     $('.slideup').slideDown().addClass('the_height').removeClass('isdown slidedown');  
9.     $('.btn_click').html("展开更多").removeClass('arrowup').addClass('arrowdown');  
10. }  
11. });  
12. $(document).ready(function(){  
13.     var article_height=$('.slideup').height();  
14.     //alert(article_height);  
15.     if(article_height<=450){  
16.         $('.btn_click').hide();  
17.         $('.slideup').addClass('slidedown');  
18.     }else{  
19.         $('.slideup').addClass('the_height');  
20.     }  
21. });  

      最终效果如下：

      如果文字高度大于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.