<p class="text">
<p class="desc">目木家居旗舰店,专注家居二十年。我们彰显个性,具有浓郁现代感现代风格家居设计的特色是,其设计的元素、材料都很单一,这种设计风格已经成为越来越多时尚潮人装修的首选,现代风格家居设计从整体到局部、从空间到室内陈设塑造,精雕细琢,给人一丝不苟的印象</p>
<a href="javascript:void(0);" class="more">更多</a>
</p>
How to achieve such an effect, the collapse and expansion arrows will change
I tried writing it, but the effect seems not ideal, because the height written here is fixed, but the amount of this text is uncertain
demo
ringa_lee2017-06-29 10:11:11
Directly wrap a layer on the outer layer of p, hide the outer overflow, and get the height setting of p;
Pay attention to the default margin of p. In the following example, use the padding of the parent element to offset it;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="http://at.alicdn.com/t/font_y2pevr1o81moyldi.css" rel="stylesheet" type="text/css">
<style>
.text{
line-height: 1.8;
margin:0 auto;
width: 500px;
}
.text .desc{
height:50px;
padding: 20px 0;
overflow: hidden;
}
.iconfont{
width: 100%;
font-size: 20px;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<p class="text">
<p class="desc">
<p class="desc-content">目木家居旗舰店,专注家居二十年。我们彰显个性,具有浓郁现代感现代风格家居设计的特色是,其设计的元素、材料都很单一,这种设计风格已经成为越来越多时尚潮人装修的首选,现代风格家居设计从整体到局部、从空间到室内陈设塑造,精雕细琢,给人一丝不苟的印象目木家居旗舰店,专注家居二十年。我们彰显个性,具有浓郁现代感现代风格家居设计的特色是,其设计的元素、材料都很单一,这种设计风格已经成为越来越多时尚潮人装修的首选,现代风格家居设计从整体到局部、从空间到室内陈设塑造,精雕细琢,给人一丝不苟的印象目木家居旗舰店,专注家居二十年。我们彰显个性,具有浓郁现代感现代风格家居设计的特色是,其设计的元素、材料都很单一,这种设计风格已经成为越来越多时尚潮人装修的首选,现代风格家居设计从整体到局部、从空间到室内陈设塑造,精雕细琢,给人一丝不苟的印象目木家居旗舰店,专注家居二十年。我们彰显个性,具有浓郁现代感现代风格家居设计的特色是,其设计的元素、材料都很单一,这种设计风格已经成为越来越多时尚潮人装修的首选,现代风格家居设计从整体到局部、从空间到室内陈设塑造,精雕细琢,给人一丝不苟的印象</p>
</p>
<p href="javascript:void(0);" class="iconfont icon-unfold"></p>
</p>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".text").off('click').on('click','.icon-unfold', function () {
$(".desc").animate({height: $('.desc-content').height()}, "slow");
$(this).removeClass('icon-unfold icon-fold').addClass('icon-fold');
}).on('click','.icon-fold', function () {
$(".desc").animate({height: '50px'}, "normal");
$(this).removeClass('icon-fold icon-unfold').addClass('icon-unfold');
});
})
</script>
</body>
</html>
巴扎黑2017-06-29 10:11:11
It’s actually quite simple:
If you want to expand or shrink based on the number of text, then you set the judgment condition based on the length
of the text. When the length is less than format
a copy of html
, this html
There is no icon on it. When the length is greater than the specified length, when shrinking, all text strings are intercepted and then spliced into an expanded icon. There are many on this font-awesome
, which corresponds to them and is displayed on the page, and then expanded as well. The same routine, but instead of intercepting the strings, just splice all the strings into a shrunken icon, and then bind events to the two icons respectively. I have given below a specific example of my previous implementation, but the code is incomplete. , it should be enough to provide you with ideas and implementation
function format_html_collapse(info) {
var expand_html = '<a href="#" class="click_expand">...点击展开 ></a>';
if (info.content.length > info.max_length) {
info.content = info.content.substring(0, info.max_length) + expand_html;
}
return info.content;
}
function format_html_expand(info) {
var collapse_html = '<a href="#" class="click_collapse">...点击收起 ></a>';
if (info.content.length > info.max_length) {
info.content = info.content + collapse_html;
}
return info.content;
}
function to_collapse(wtable) {
$('.click_collapse').on('click', function(e) {
xxx.html(format_html_collapse(fc_value));
});
to_expand(wtable);
});
}
function to_expand(wtable) {
$('.click_expand').on('click', function(e) {
// 此处省略部分代码
fe_value.td.html(format_html_expand(fe_value));
});
to_collapse(wtable);
});
女神的闺蜜爱上我2017-06-29 10:11:11
For animation, try this:
demo
I got some inspiration after reading @aunt’s answer (here) a few days ago.
The key point is: to expand without a fixed height, first set the height to auto, then use getComputedStyle
to get the height, then set the height to 0, and use the obtained height to animate.