javascript - Le texte jq à hauteur fixe se développe et se réduit

Question

{Code...} Comment obtenir cet effet ? J'ai essayé d'écrire l'effet après avoir plié et agrandi la flèche. Cela ne semble pas idéal car la hauteur écrite ici est fixe, mais la quantité de ce texte est une démo incertaine.

ringa_lee · Answer

Enroulez directement un calque sur le calque externe de p, masquez le débordement externe et obtenez le paramètre de hauteur de p ;
Faites attention à la marge par défaut de p Dans l'exemple suivant, utilisez le remplissage de l'élément parent pour le décaler. ;




    
    Title
    
    



    

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

巴扎黑 · Answer

C'est en fait assez simple :
Si vous souhaitez agrandir ou réduire en fonction du nombre de texte, alors vous pouvez faire correspondre les length来设定判断条件,当长度小于的时候format一份html，这个html上面没有图标，当长度大于规定长度时，收缩时，对所有文字字符串进行截取然后拼接一个展开的图标，这个font-awesomeil y en a plusieurs et l'afficher sur la page, puis l'agrandir en utilisant la même routine, sauf que vous n'avez pas besoin d'intercepter la chaîne. , divisez simplement toutes les chaînes en une icône réduite, puis liez les événements aux deux icônes respectivement. J'ai donné ci-dessous un exemple spécifique de mon implémentation précédente. Le code n'est pas complet. Cela devrait suffire à vous fournir des idées et une mise en œuvre

.

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

Pour l'animation, essayez ceci :
démo

J’ai eu un peu d’inspiration après avoir lu la réponse de @auntie (ici) il y a quelques jours.
Le point clé est le suivant : pour agrandir sans hauteur fixe, définissez d'abord la hauteur sur auto, puis utilisez getComputedStyle pour obtenir la hauteur, puis définissez la hauteur sur 0 et utilisez la hauteur obtenue pour animer.

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket