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();
});

который делает именно то, что я хочу, он закрывает все открытые uls при нажатии другого li чтобы показать (это миниатюрная версия, очевидно, я проверяю, видна ли она и т. д.).

Проблема, однако, заключается в следующем: давайте предположим, что эти ul uls имеет содержимое выше, чем высота окна, и что мы открыли второй последний. Чтобы посмотреть последний, прокручиваем вниз и нажимаем последний li, Сейчас, так как теперь закрытие ul был больше, чем высота окна, нажал li подтягивается из-за slideDown()анимация, и в результате нажал li исчезает из области просмотра. Есть ли решение, чтобы справиться с этим, используя slideDown() а также slideUp()? Цель состояла бы в том, чтобы анимация прокрутки окна была остановлена, когда щелчок li достигает чего-то вроде top:50px, но в то же время анимация slideUp() должна завершиться и закрыть ul ранее.