我有一个列表，其中一些元素有子导航:
<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？
最佳答案
这是一个讨厌的 hack，它可以工作......在准备好的处理程序上为打开的子导航分配高度
$('.nav-sidebar .slidedown.open .nav-sub').height(function(){
return $(this).height();
})
演示:Fiddle
另一种解决方案在下面的帖子中讨论
关于jquery - 高度让这个子导航在第一次点击时向上滑动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22521016/