slidetoggle穿越父元素限制方法

小樊
83
2024-07-02 11:16:40

要實(shí)現(xiàn)在父元素內(nèi)部進(jìn)行 slidetoggle 動(dòng)畫(huà)，并且限制子元素不溢出父元素的方法可以通過(guò)以下步驟：

  1. 使用 CSS 將父元素設(shè)置為相對(duì)定位，以便子元素可以相對(duì)于父元素進(jìn)行定位。
.parent {
  position: relative;
  overflow: hidden;
}
  1. 在子元素中添加絕對(duì)定位，并設(shè)置 top 和 left 屬性為 0，以確保子元素始終相對(duì)于父元素的左上角進(jìn)行定位。
.child {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}
  1. 使用 jQuery 的 slidetoggle() 方法來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果，并在動(dòng)畫(huà)完成后調(diào)整父元素的高度以適應(yīng)子元素的大小。
$('.trigger').click(function() {
  $('.child').slideToggle('slow', function() {
    $('.parent').css('height', $('.child').is(':visible') ? $('.child').height() : 0);
  });
});

通過(guò)以上步驟，可以實(shí)現(xiàn)在父元素內(nèi)部進(jìn)行 slidetoggle 動(dòng)畫(huà)，并且限制子元素不溢出父元素的效果。

0 踩