JQuery slideUp（）/ slideDown（）导致单击的元素被隐藏

Question

我有一个看起来像这样的简单列表结构

<ul class="list">
  <li id="li1"></li>
  <li><ul id="ul1"></ul></li>

  <li id="li2"></li>
  <li><ul id="ul2"></ul></li>

  <li id="li3"></li>
  <li><ul id="ul3"></ul></li>

  <!-- ... -->
</ul>

和

ul li ul {display: none;}

和

$(".list li").click(function(){
  $(".list li ul).slideUp();
  $("#ul" + $(this).attr("id").substr(2)).slideDown();
});

它完全符合我的要求，它会在点击另一个ul时关闭所有已打开的li以显示（这是缩小版本，显然我正在检查它是否已经可见等）

然而问题是：让我们假设这些ul ul的内容高于窗口高度，而我们打开了倒数第二个。要查看最后一个，我们滚动到底部并单击最后一个li。现在，由于现在关闭ul大于窗口高度，因为li - 动画，所点击的slideDown()会被拉高，因此点击的li消失了来自视口。有没有使用slideDown()和slideUp()处理此问题的解决方案？目标是当点击li到达类似top:50px之类的时候窗口滚动动画停止，但同时slideUp（）动画必须终止并关闭之前的ul。