Expanding and hiding articles on the first screen page of the mobile phone_html/css

Home

Web Front-end

HTML Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:53 AM

本人做的是手机端的前端开发，事事处处都得从手机用户的体验着手考虑。大家都知道手机相对于pc来说要小很多，所要容纳的东西相对于pc来说也要少之又少。一些重要的东西又希望用户在打开手机网站的第一屏就能看到，这时就要尽可能地将重点呈现给用户。

内容又由文字，图片等等信息组成，如果文字过长，就显得冗余，这里就为大家介绍一个如何隐藏多余文字和展开多余文字的方法。

需要的技术支持：CSS3，一般jQuery库；

HTML代码如下：

Html代码

This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.

展开更多

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
$('.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.

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PM

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PM

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

What is the purpose of the <iframe> tag? What are the security considerations when using it?Mar 20, 2025 pm 06:05 PM

The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PM

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

What is the viewport meta tag? Why is it important for responsive design?Mar 20, 2025 pm 05:56 PM

The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.

How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

See all articles