auf Klick auf den Button überschwemmt glatt verborgenen Text in div zeigen verbleibenden

Question

Lassen Sie uns sagen, dass ich ein Div mit max-height von 100px und Text darin haben die Überläufe

div {position:absolute;top:0;left:0;background:red;max- height:100px;width:100px; display:flex;flex-wrap:wrap;position:relative} 

Und ich habe eine Schaltfläche am unteren Rand davon:

button {position:absolute;bottom:0;width:100%;height:30px;background:blue;} 

und was ich versuche, mit jquery zu tun ist: auf Klick auf den Button glatt es unten zu schieben und alle zeigen die verbleibende verborgenen Text in der div.

Answer 1

Meinst du sowas? https://jsfiddle.net/s6ypy4w1/

$(document).ready(function() { 
    $('div').css('height', 'auto'); 
    var thisHeight = $('div').height(); 
    $('div').css('height', 100); 
    $("button").on('click', function() { 
    $('div').animate({ 
     'height': thisHeight 
    }) 
    }); 
}); 

Die jQuery setzt die Höhe auf Auto breifly die ‚auto‘ speichern Höhe stellt sie wieder her dann auf die ursprüngliche Höhe Sie es möchten sein. Dann animiert es auf Knopfdruck auf die gespeicherte Höhe. Hoffe das hilft!

Answer 2

können Sie verschiedene Ansätze nutzen hier:

1. CSS nur: schwer, es zu tun, weil wir nicht wissen, die endgültige max-height Wert. Dazu müssten wir zu einem festen Wert animieren (zum Beispiel auf 300px oder 10em). Umgekehrt wäre eine Rückwärts-Animation schwer zu implementieren, als wenn Sie Checkboxen wie im Beispiel unten verwenden, als wenn Sie individuelle IDs zuweisen müssen (könnte aber auch per Skript erweitert werden).

2. jQuery + CSS: Wenn wir dies reaktionsfähig machen wollen, müssen wir die Höhe des expandierten Elements berechnen. Im folgenden Beispiel zählen wir die Textzeilen und multiplizieren mit Zeilenhöhe.

3. Für nicht reagierende Website, oder wenn Sie immer Breite festgelegt haben, verwenden Sie einfach aender's Lösung, die er hier gepostet.

CSS NUR (fiddle)

.overflow-box { 
 
    line-height: 1.5em; 
 
\t overflow: hidden; 
 
\t margin: 20px 0; 
 
\t position: relative; 
 
\t border: 1px solid #ccc; 
 
} 
 

 
.overflow-box input { 
 
    display: none; 
 
} 
 

 
.overflow-box label { 
 
    display: block; 
 
    position: absolute; 
 
\t z-index: 100; 
 
    top: 4.5em; 
 
    width: 100%; 
 
    text-align: center; 
 
    background: none #fff; 
 
} 
 

 
.overflow-content { 
 
    max-height: 6em; 
 
    overflow: hidden; 
 
\t transition: max-height 0s; 
 
} 
 

 
.overflow-box input:checked + label { 
 
\t top: auto; 
 
\t bottom: 0; 
 
} 
 

 
.overflow-box input:checked + label + .overflow-content { 
 
    max-height: 20em; 
 
\t margin-bottom: 1.5em; 
 
\t transition: .5s ease-in-out; 
 
}

<div class="overflow-box"> 
 
    <input id="o1" type="checkbox" /> 
 
    <label for="o1" class="overflow-button"> 
 
     Click me 
 
    </label> 
 
    <div class="overflow-content"> 
 
     This is responsive: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
     in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
 
    </div> 
 
</div> 
 

 
<div class="overflow-box"> 
 
    <input id="o2" type="checkbox" /> 
 
    <label for="o2" class="overflow-button"> 
 
     Click me 
 
    </label> 
 
    <div class="overflow-content"> 
 
     Short content, one line. 
 
    </div> 
 
</div> 
 

 
<div class="overflow-box"> 
 
    <input id="o3" type="checkbox" /> 
 
    <label for="o3" class="overflow-button"> 
 
     Click me 
 
    </label> 
 
    <div class="overflow-content"> 
 
     4 lines content. 
 
     <br> 4 lines content. 
 
     <br> 4 lines content. 
 
     <br> 4 lines content. 
 
    </div> 
 
</div>

jQuery + CSS (fiddle)

var maxLines = 3; 
 
var lineHeight = 1.5; /* em */ 
 
var boxes = $('.overflow-box'); 
 
function checkBox(box, content, toggle, text) { 
 
\t var lines = text[0].getClientRects().length; 
 
\t console.log('lines: ' + lines); 
 
\t if(lines>maxLines) { 
 
\t \t box.removeClass('overflow-short'); 
 
\t \t if(box.hasClass('overflow-expanded')) { 
 
\t \t \t content.css({'max-height': (lines*lineHeight)+'em'}); 
 
\t \t } else { 
 
\t \t \t content.css({'max-height': (maxLines*lineHeight)+'em'}); 
 
\t \t }; 
 
\t } else { 
 
\t \t box.addClass('overflow-short'); 
 
\t }; 
 
}; 
 
boxes.each(function(i){ 
 
\t var thisBox = $(this); 
 
\t var thisContent = thisBox.find('.overflow-content'); 
 
\t thisContent.wrapInner('<div class="overflow-content-inner"></div>'); 
 
\t var thisToggle = thisBox.find('.overflow-toggle'); 
 
\t var thisText = thisBox.find('.overflow-content-inner'); 
 
\t checkBox(thisBox, thisContent, thisToggle, thisText); 
 
\t thisToggle.on('click', function(e) { 
 
\t \t thisBox.toggleClass('overflow-expanded'); 
 
\t \t checkBox(thisBox, thisContent, thisToggle, thisText); 
 
\t }); 
 
\t $(window).on('resize', function(e) { 
 
\t \t checkBox(thisBox, thisContent, thisToggle, thisText); 
 
\t }); 
 
});

.overflow-box { 
 
\t line-height: 1.5em; 
 
\t margin: 20px 0; 
 
\t border: 1px solid #ccc; 
 
} 
 
.overflow-content { 
 
\t overflow: hidden; 
 
\t transition: .5s ease-in-out; 
 
} 
 
.overflow-content-inner { 
 
\t display: inline; 
 
} 
 
.overflow-toggle { 
 
\t width: 100%; 
 
\t text-align: center; 
 
    background: none #fff; 
 
\t cursor: pointer; 
 
} 
 
.overflow-short .overflow-toggle { 
 
\t display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="overflow-box"> 
 
    <div class="overflow-content"> 
 
     This is responsive: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
     in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
 
    </div> 
 
\t <div class="overflow-toggle"> 
 
\t \t Click me 
 
\t </div> 
 
</div> 
 

 
<div class="overflow-box"> 
 
    <div class="overflow-content"> 
 
     Short content, one line. 
 
    </div> 
 
\t <div class="overflow-toggle"> 
 
\t \t Click me 
 
\t </div> 
 
</div> 
 

 
<div class="overflow-box"> 
 
    <div class="overflow-content"> 
 
     4 lines content. 
 
     <br> 4 lines content. 
 
     <br> 4 lines content. 
 
     <br> 4 lines content. 
 
    </div> 
 
\t <div class="overflow-toggle"> 
 
\t \t Click me 
 
\t </div> 
 
</div>