单击时jQuery在兄弟上设置高度

之前我问过这个问题，关于在切换课程后将高度设置为0 。

虽然答案是正确的，但事实certificate我的问题并非如此，我重新改写并尝试解决我的问题。

• 我有一个导航列表，一些项目里面有一个子导航列表
• 每个具有子导航的项目都有一个您单击的切换箭头
• 我希望子导航
  以0的高度开始，当你点击切换箭头时我想用jQuery将子导航的高度设置为它的项目的计算高度

  

  HTML是这样的：

   
   Parent Link      
   
   Child Menu Item 1 
   
    

  我之前的问题的答案给了我这个脚本：

   $(function navCollapse() { var slidedownToggle = $('#global-nav .slidedown-toggle'); slidedownToggle.click(function () { var slidedown = $(this).parent('.slidedown'); var $li = $(this).closest('li'); var subnav = $(this).siblings('.nav-sub'); var subnavHeight = subnav.height(); slidedown.toggleClass('open'); if ($li.hasClass('open')) { subnav.height(0); } else { subnav.height(subnavHeight); } }); }); 

  但我很快意识到，一旦将高度设置为0，无论您点击多少次，脚本都会继续将其计算为0。 这让我感到困惑和困惑。

  旧的Bootstrap Collapse几乎就是我想要的（只有高度变化）。 它通过JavaScript设置高度，然后使用CSS进行转换。 虽然我不希望我的子菜单display: none 。

  有任何想法吗？

  注意：我不想使用JavaScript动画。 我想使用CSS。 我也不想使用max-height解决方案只对CSS下拉。 那是我的后备。

  DEMO

  Answer 1

  代码逻辑存在一些问题，所以我做了一些修改。

   $(function navCollapse() { var slidedownToggle = $('#global-nav .slidedown-toggle'); slidedownToggle.click(function () { // Get the container item var $slidedown = $(this).parents('.slidedown'); // Get the ul that needs to slide up/down var $subnav = $(this).siblings('.nav-sub'); // Calculate the height required (in px) to show all LIs var totalHeight = 0; $subnav.find('li').each(function() { totalHeight += $(this).height(); }); // Set the appropriate height if ($slidedown.hasClass('open')) { $subnav.css({height: '0px'}); } else { $subnav.css({height: totalHeight + 'px'}); } $slidedown.toggleClass('open'); }); }); 

  然后在CSS中确保将过渡应用到.nav-sub ：

   -webkit-transition: height 0.2s linear; -moz-transition: height 0.2s linear; -ms-transition: height 0.2s linear; -o-transition: height 0.2s linear; transition: height 0.2s linear; 

  工作范例：

  http://jsbin.com/INIwuTA/11/

  Answer 2

  这是一种方式： http ： //jsfiddle.net/Tes9P/2/

  基本上，这会将转换应用于围绕子菜单的包装器div。 由于CSS过渡需要设置高度来设置动画（您无法设置为自动动画），因此此包装器的高度需要大于最大子菜单的高度。

  在我的jsfiddle中，我设置了这样的CSS：

   .nav-sub { height:auto; background-color:#eee; } .nav-sub-holder { -webkit-transition: height 2s ease; -moz-transition: height 2s ease; -o-transition: height 2s ease; transition: height 2s ease; overflow:hidden; height:100px; } .closed { height:0px; overflow:hidden; }