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/

当溢出改变时，下一个元素不会被按下

1 个答案: