高度使此子导航在第一次单击时向上滑动
Posted
技术标签:
【中文标题】高度使此子导航在第一次单击时向上滑动【英文标题】：Height to get this sub navigation to slide up on first click 【发布时间】：2014-04-26 14:13:09 【问题描述】：我有一个列表，其中一些项目有子导航：
<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>
我有这个脚本，它会在单击 .slidedown-toggle 时计算子导航 <ul> 的高度，然后根据父级 <li> 将其更改为 0，该类具有已切换的“打开”类。
$(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”页面上时，我希望扩展菜单以显示您所在的位置。因为我在 CSS 中为 .slidedown.open 设置了 height: auto，所以当您第一次单击“打开”项目。
了解我在说什么的最简单方法是查看 JSBIN。单击第二个“显示菜单”，它可以很好地上下滑动。单击第一个，第一次单击不会滑动（因为高度自动）。我该如何解决？也许先设置点击高度，然后设置为0？
http://jsbin.com/poxiy/2/edit
【问题讨论】：
【参考方案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【讨论】：
你能解释一下为什么这是一个“讨厌的黑客”吗？我知道其他 CSS 解决方案，但是当你有不同长度的子导航时它们会失败，在某些情况下它们很长。也许使用标准的.show() and .hide() 会更好，但与 CSS 动画相比，我发现动画有时很生涩。
@davidpauljunior（不是 css 动画专家）我称其为讨厌的 hack，因为可能有更优雅的解决方案，而我们正在做的是 hack【参考方案2】：
您可以尝试基于悬停的菜单列表 - 看起来超级性感。
HMTL
> <!DOCTYPE html> <html> <head> <script
> src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <ul
> id="nav"> <li><a href="#">Parent 01</a></li> <li><a href="#"
> class="selected">Parent 02</a> <ul> <li><a href="#">Item
> 01</a></li> <li><a href="#" class="selected">Item 02</a></li>
> <li><a href="#">Item 03</a></li> </ul> <div
> class="clear"></div> </li> <li><a href="#">Parent 03</a> <ul>
> <li><a href="#">Item 04</a></li> <li><a href="#">Item 05</a></li>
> <li><a href="#">Item 06</a></li> <li><a href="#">Item 07</a></li>
> </ul> <div class="clear"></div> </li> <li><a href="#">Parent
> 04</a></li> </ul> </body> </html>
Java
$(document).ready(function ()
$('#nav li').hover(
function ()
//show its submenu
$('ul', this).stop().slideDown();
,
function ()
//hide its submenu
$('ul', this).stop().slideUp();
);
);
【讨论】：
我可以，但这不是我想要的功能。以上是关于高度使此子导航在第一次单击时向上滑动的主要内容，如果未能解决你的问题，请参考以下文章