当溢出发生变化时，下一个元素不会被按下

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/