javascript - jq fixed height text expand and collapse

Question

{Code...} How to achieve such an effect? ​​I tried writing the effect after folding and expanding the arrow. It seems not ideal, because the height written here is fixed, but the amount of this text is uncertain demo

ringa_lee · Answer

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;




    
    Title
    
    



    

    
目木家居旗舰店，专注家居二十年。我们彰显个性，具有浓郁现代感现代风格家居设计的特色是，其设计的元素、材料都很单一，这种设计风格已经成为越来越多时尚潮人装修的首选，现代风格家居设计从整体到局部、从空间到室内陈设塑造，精雕细琢，给人一丝不苟的印象目木家居旗舰店，专注家居二十年。我们彰显个性，具有浓郁现代感现代风格家居设计的特色是，其设计的元素、材料都很单一，这种设计风格已经成为越来越多时尚潮人装修的首选，现代风格家居设计从整体到局部、从空间到室内陈设塑造，精雕细琢，给人一丝不苟的印象目木家居旗舰店，专注家居二十年。我们彰显个性，具有浓郁现代感现代风格家居设计的特色是，其设计的元素、材料都很单一，这种设计风格已经成为越来越多时尚潮人装修的首选，现代风格家居设计从整体到局部、从空间到室内陈设塑造，精雕细琢，给人一丝不苟的印象目木家居旗舰店，专注家居二十年。我们彰显个性，具有浓郁现代感现代风格家居设计的特色是，其设计的元素、材料都很单一，这种设计风格已经成为越来越多时尚潮人装修的首选，现代风格家居设计从整体到局部、从空间到室内陈设塑造，精雕细琢，给人一丝不苟的印象

巴扎黑 · Answer

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 formata 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 = '...点击展开 >';                                                                                             
    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 = '...点击收起 >';
    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);
});

女神的闺蜜爱上我 · Answer

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.