Question

我有一个div，我在隐藏元素上使用负边距，显示slideToggle()。但是，负边距在元素完全可见之前不会对元素产生影响。有没有什么方法可以让元素出现，并且已经应用了负边距？（我在这里使用负边距的具体原因在我的代码示例中并不明显。）

$(function() {
  $('.info').click(function() {
    $('.more-info').slideToggle(500);
  });
});

.info {
  height:150px;
  display:table-cell;
  vertical-align:middle;
  cursor:pointer;
}

.more-info {
  margin-top:-30px;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info">
  View more +
</div>
<div class="more-info">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce venenatis vehicula venenatis. Nunc at maximus erat. Sed sed vestibulum diam. Aliquam erat volutpat. Quisque semper mi nec finibus suscipit. Curabitur ac fringilla orci, vel semper massa. Aenean mattis vel libero ut vulputate. Nunc a vulputate libero. Praesent tristique dictum dictum. In consectetur, nisl in semper lacinia, ligula risus pharetra nisl, sit amet congue felis odio sed dolor. Nullam pharetra varius orci, non dapibus diam dapibus at. Donec felis urna, laoreet id blandit id, vestibulum vulputate eros. Phasellus nunc odio, cursus quis tempor nec, accumsan eu lectus.</p>
</div>

Answer 1

您可以使用translateY()代替margin

$(function() {
  $('.info').click(function() {
    $('.more-info').slideToggle(500);
  });
});

.info {
  height:150px;
  display:table-cell;
  vertical-align:middle;
  cursor:pointer;
}

.more-info {
  transform: translateY(-30px);
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info">
  View more +
</div>
<div class="more-info">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce venenatis vehicula venenatis. Nunc at maximus erat. Sed sed vestibulum diam. Aliquam erat volutpat. Quisque semper mi nec finibus suscipit. Curabitur ac fringilla orci, vel semper massa. Aenean mattis vel libero ut vulputate. Nunc a vulputate libero. Praesent tristique dictum dictum. In consectetur, nisl in semper lacinia, ligula risus pharetra nisl, sit amet congue felis odio sed dolor. Nullam pharetra varius orci, non dapibus diam dapibus at. Donec felis urna, laoreet id blandit id, vestibulum vulputate eros. Phasellus nunc odio, cursus quis tempor nec, accumsan eu lectus.</p>
</div>

Answer 2

您可以使用相对位置

$(function() {
  $('.info').click(function() {
    $('.more-info').slideToggle(500);
  });
});

.info {
  height:150px;
  display:table-cell;
  vertical-align:middle;
  cursor:pointer;
}

.more-info {
  position:relative;
  top:-30px;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info">
  View more +
</div>
<div class="more-info">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce venenatis vehicula venenatis. Nunc at maximus erat. Sed sed vestibulum diam. Aliquam erat volutpat. Quisque semper mi nec finibus suscipit. Curabitur ac fringilla orci, vel semper massa. Aenean mattis vel libero ut vulputate. Nunc a vulputate libero. Praesent tristique dictum dictum. In consectetur, nisl in semper lacinia, ligula risus pharetra nisl, sit amet congue felis odio sed dolor. Nullam pharetra varius orci, non dapibus diam dapibus at. Donec felis urna, laoreet id blandit id, vestibulum vulputate eros. Phasellus nunc odio, cursus quis tempor nec, accumsan eu lectus.</p>
</div>

带有负边距的slideToggle无法正常工作

2 个答案: