オーバーフローが変更されたときに次の要素がプッシュダウンされない

Question

コンテンツを表示および非表示にするread more-lessボタンを作成しようとしています。しかし、最初のdivが増えると、次の要素が押されないので、いくつかの問題があります。

これはコードです：

$("i").click(function(){ 
 
$(".texto").toggleClass("hide-text"); 
 
});

#masTexto { 
 
position: relative; 
 
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(80, 80, 80, 0.3)), to(rgba(50, 50, 50, 0.8)), color-stop(.5, #333333)); 
 
    width: 100%; 
 
    height: 5em; 
 
    color: #28f; 
 
    margin-top : -10px; 
 
    text-align: right; 
 
} 
 

 
i { cursor: pointer; } 
 

 
.texto{ 
 
    height: 7em; 
 
    overflow: hidden; 
 
    position: relative; 
 
    clear: both; 
 
z-index: -1; 
 
} 
 

 
.hide-text{ 
 
overflow: initial; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="texto"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut placerat laoreet tellus, vitae aliquam nisl blandit ac. Nullam nec purus erat. Nam consectetur eget nisi et tempor. Maecenas condimentum tincidunt magna quis accumsan. Nam eu egestas erat. Integer 
 
    condimentum sodales pretium. Fusce sit amet rhoncus mauris. Suspendisse feugiat consectetur enim malesuada feugiat. 
 
    <br> Aliquam rutrum, quam quis sodales hendrerit, mi nisl pellentesque felis, sed ornare magna magna sit amet lacus. Donec ligula justo, varius eget tristique vel, ultricies eget nibh. Phasellus vel leo gravida, tempor orci volutpat, sodales ex. Donec ac 
 
    arcu nulla. Sed feugiat imperdiet purus vel vehicula. In aliquam libero sed enim elementum, quis iaculis ante rutrum. Sed eget urna dictum, mattis felis vestibulum, scelerisque arcu. Fusce suscipit mi eu purus dapibus imperdiet. Fusce elit ante, semper 
 
    placerat mi quis, laoreet euismod turpis. 
 
</div> 
 
<div id="masTexto"> 
 
    <br><br><i id="mas">Leer más</i> 
 
</div>

私はrelativeabsoluteに位置し、overflow:initialを変更しましたが、何も起こりません。また、私はthis referenceを探しますが、doenstは私のために働きます。ありがとう。

Answer 1

実際のコードの問題点は、最初に固定高さをtexto要素に設定していることです。

$("i").click(function(){ 
 
$(".texto").toggleClass("hide-text"); 
 
});

#masTexto { 
 

 
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(80, 80, 80, 0.3)), to(rgba(50, 50, 50, 0.8)), color-stop(.5, #333333)); 
 
    width: 100%; 
 
    height: 5em; 
 
    color: #28f; 
 
    margin-top : -10px; 
 
    text-align: right; 
 
} 
 

 
i { cursor: pointer; } 
 

 
.texto{ 
 
    height: 7em; 
 
    overflow: hidden; 
 
z-index: -1; 
 
} 
 

 
.hide-text{ 
 
overflow: initial; 
 
height: 15em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="texto"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut placerat laoreet tellus, vitae aliquam nisl blandit ac. Nullam nec purus erat. Nam consectetur eget nisi et tempor. Maecenas condimentum tincidunt magna quis accumsan. Nam eu egestas erat. Integer 
 
    condimentum sodales pretium. Fusce sit amet rhoncus mauris. Suspendisse feugiat consectetur enim malesuada feugiat. 
 
    <br> Aliquam rutrum, quam quis sodales hendrerit, mi nisl pellentesque felis, sed ornare magna magna sit amet lacus. Donec ligula justo, varius eget tristique vel, ultricies eget nibh. Phasellus vel leo gravida, tempor orci volutpat, sodales ex. Donec ac 
 
    arcu nulla. Sed feugiat imperdiet purus vel vehicula. In aliquam libero sed enim elementum, quis iaculis ante rutrum. Sed eget urna dictum, mattis felis vestibulum, scelerisque arcu. Fusce suscipit mi eu purus dapibus imperdiet. Fusce elit ante, semper 
 
    placerat mi quis, laoreet euismod turpis. 
 
</div> 
 
<div id="masTexto"> 
 
    <br><br><i id="mas">Leer más</i> 
 
</div>

しかしこれは、これを行うためのクリーンな方法があります...あなたの実際のコードです。これは、最初のテキストを1行に入れても構いません。 CSS ellipsisを使用できます。ちょうどフィドルをチェックし、幅を微調整してください。唯一の問題は、CSSが複数行out of the boxをサポートしていないことです。これを行うにはjsが必要です。しかし、2番目のソリューションがあなたのケースに合っているかどうかを確認してください。

https://jsfiddle.net/9np4yatL/