高度使此子导航在第一次单击时向上滑动答案

【问题标题】：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

【问题讨论】：

标签： jquery css

【解决方案1】：

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

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

演示：Fiddle

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

【讨论】：

你能解释一下为什么这是一个“讨厌的黑客”吗？我知道其他 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();         
        }
    ); 

});

【讨论】：

我可以，但这不是我想要的功能。