Javascript jQuery在单击时设置同级上的高度

早些时候我问

虽然答案是正确的，但事实证明我的问题并非如此，因此我重新措辞，并尝试解决我的问题

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

HTML如下所示：

<li class="slidedown">
  <a href="#">Parent Link</a>
  <!-- Dropdown arrow -->
  <span class="slidedown-toggle">
    <span class="caret"></span>
  </span>
  <!-- Submenu -->
  <ul class="nav nav-sub">
    <li>
      <a href="#">Child Menu Item 1</a>
    </li>
  </ul>
</li>

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

}

但是我很快意识到，一旦高度设置为0，脚本将从那时起继续将其计算为0，无论单击多少次。 这让我感到困惑和困惑

旧的引导折叠几乎就是我想要的（只是高度变化）。它通过JavaScript设置高度，然后使用CSS进行转换。虽然我不想让我的子菜单显示：无

有什么想法吗

注意：我不想使用JavaScript动画。我想用CSS来实现这一点。 我也不想将

max height

解决方案用于仅CSS下拉列表。这是我的退路

---

您的代码的逻辑存在一些问题，因此我做了一些修改

$(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;

工作示例：

这里有一种方法：

基本上，这将转换应用于围绕子菜单的包装器div。因为CSS转换需要设置动画的高度（不能设置动画为自动），所以此包装器的高度必须大于最大子菜单的高度

在我的JSFIDLE中，我将CSS设置为：

<li class="slidedown">
  <a href="#">Parent Link</a>
  <!-- Dropdown arrow -->
  <span class="slidedown-toggle">
    <span class="caret"></span>
  </span>
  <!-- Submenu -->
  <ul class="nav nav-sub">
    <li>
      <a href="#">Child Menu Item 1</a>
    </li>
  </ul>
</li>

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

}

---

你能创造吗？为什么还要为身高而烦恼呢？您只需单击即可

.toggle（）

您的元素，无需设置任何高度。@RokoC.Buljan-没有JS过渡？@davidpauljunior什么过渡

.toggle（）

只需切换

显示：内联/块
和
显示：无。为什么要用CSS制作动画？jQuery有什么问题？jQuery将使您的动画也可用于非HTML5浏览器