javascript - SlideToggle 动画与图像和文本中断

Question

我正在尝试让 Slidetoggle 在 div 上正常工作。我有以下格式的 html:

<div class="root-div first-service">
     <div class="title-div gradient">
          <div class="title-div-left">
               <p>$ServiceName</p>
          </div>
          <div class="title-div-right">
               <p>&#x25B2;</p>
          </div>
      </div>
      <div class="description-div show minimum-height">
           <div class="description-content-div">
                $ServiceDescription
           </div>
      </div>
      <div class="services-image-two">
           <img src="themes/theinneryou/images/ServicesImage2.jpg" alt="Missing Image"/>
      </div>
</div>

我还有如下 JavaScript:

$('.title-div').on('click', function () {
    var arrow = $(this).find('.title-div-right');
    if (proceed) {
        proceed = false;
        $(this).closest('.root-div').find('.services-image-two').slideToggle("slow");
        $(this).closest('.root-div')
        .find('.description-div')
            .slideToggle("slow", function () {
                $(arrow).text().trim().charCodeAt(0) == 9650 ? $(arrow).html('<p>&#x25BC;</p>') : $(arrow).html('<p>&#x25B2;</p>');
                proceed = true;
            });
    }
});

我得到的效果是图像本身播放幻灯片动画，然后隐藏，然后下一个包含文本的 div 的其余部分仅被隐藏，没有任何动画。图像与文本 div 重叠，因为我将其置于绝对定位下。您可以在 tiu.azularis.com/Services

上观看现场演示

有没有办法让它们在我单击箭头时优雅地滑动在一起，然后在单击向下箭头时一起出现？

我还尝试将图像 div 移动到描述 div 内，并尝试在第一个动画之后设置 .delay，但都没有效果。

Answer 1

更改 Services.css 中的第 83 行:

.services-wrapper .expansion-wrap .first-service .minimum-height {
    /* min-height: 20.4rem; */
    height: 20.4rem;
}

min-height 搞砸了。

否则，您必须修复整个部分的 HTML + CSS，因为它并不理想。