當溢出發生變化時，下一個元素不會被按下

Question

我試圖使讀取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>

我已經改變了relative到absolute位置和overflow:initial但沒有任何反應。我也尋找this reference，但是對我而言是有效的。謝謝。

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>

這與你的實際代碼......但是，沒有做到這一點更清潔的方式。這是爲了萬一你不介意在一行中有初始文本。你可以使用css ellipsis。只需檢查小提琴並調整寬度即可。唯一的問題是，CSS不支持多行out of the box，它需要JS來做到這一點。但看看第二個解決方案是否適合你的情況。

https://jsfiddle.net/9np4yatL/