Высота, чтобы эта суб-навигация скользила вверх при первом нажатии

У меня есть список, где некоторые элементы имеют суб-навигацию:

  <ul role="menu">
    <li role="menuitem">
      <a href="#" class="clearfix">Top Level</a>
    </li>
    <li class="slidedown open" role="menuitem">
      <a href="#" class="clearfix">Top Level</a>
      <span class="slidedown-toggle">Show Sub Menu</span>
      <!-- Subnav -->
      <ul class="list-reset nav-sub" role="menu">
        <li role="menuitem">
          <a href="#">Second Level</a>
        </li>
        <li role="menuitem">
          <a href="#">Second Level</a>
        </li>
        <li role="menuitem">
          <a href="#">Second Level</a>
        </li>
      </ul>
    </li>
  </ul>

У меня есть этот скрипт, который вычисляет высоту subnav <ul> при нажатии на .slidedown-toggle а затем меняет его на 0 в зависимости от родительского <li> имеющего открытый класс.

$(document).ready( function(){ 

  var $slidedownToggle = $('.nav-sidebar .slidedown-toggle');

  $slidedownToggle.click(function () {

    var $slidedown = $(this).parent('.slidedown'); // Get the container item
    var $subnav = $(this).siblings('.nav-sub'); // Get the ul that needs to slide up/down

    var totalHeight = 0; // Calculate the height required (in px) to show all <li>'s
    $subnav.find('li').each(function() {
      totalHeight += $(this).outerHeight(true);
    });

    // Toggle 'open' class on the parent <li>
    $slidedown.toggleClass('open');

    // Set the appropriate height
    if ($slidedown.hasClass('open')) {
      $subnav.css({height: totalHeight + 'px'});
    } else {
      $subnav.css({height: '0px'});
    }

  });

});

Проблема в том, что иногда класс 'open' уже был добавлен <li class="slidedown"> потому что, когда вы находитесь на странице subnav, я хочу, чтобы меню было израсходовано, чтобы показать, где вы находитесь. Поскольку я устанавливал height: auto в CSS для .slidedown.open, высота не анимирована (я знаю весь слайдунг с использованием max-height, и я не хочу этого), когда вы сначала нажимаете переключатель slidedown-toggle "открытых" предметов.

Самый простой способ увидеть, что я делаю, это посмотреть на JSBIN. Нажмите второе "шоу-меню", и оно будет хорошо скользить вверх и вниз. Нажмите первый, и первый клик не будет скользить (из-за автоматической высоты). Как я могу это исправить? Может быть, сначала установите высоту щелчка, а затем установите значение 0?

http://jsbin.com/poxiy/2/edit