jquery - 高度让这个子导航在第一次点击时向上滑动

Question

我有一个列表，其中一些元素有子导航:

  <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>

我有这个脚本，它计算子导航的高度 <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'});
    }

  });

});

我遇到的问题是有时“打开”类已经被添加到 <li class="slidedown">因为当您在“子导航”页面上时，我希望菜单展开以显示您所在的位置。因为我设置了height: auto在 .slidedown.open 的 CSS 中，当您第一次单击“打开”元素的滑动切换时，高度不是动画的(我知道使用最大高度的整个滑动，但我不希望那样)。

查看我正在讨论的内容的最简单方法是查看 JSBIN。单击第二个“显示菜单”，它会很好地上下滑动。单击第一个，第一次单击不会滑动(因为高度自动)。我该如何解决？也许先设置点击高度，然后将其设置为 0？

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

Answer 1

这是一个讨厌的 hack，它可以工作......在准备好的处理程序上为打开的子导航分配高度

$('.nav-sidebar .slidedown.open .nav-sub').height(function(){
    return $(this).height();
})

演示:Fiddle

另一种解决方案在下面的帖子中讨论

• > CSS transition height: 0; to height: auto;
• > CSS transition auto height not working