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

【问题标题】：jQuery set height on a sibling when clicked单击时jQuery在兄弟上设置高度
【发布时间】：2023-03-28 04:49:01
【问题描述】：

之前我问过this question about setting a height back to 0 after toggling a class。

虽然答案是正确的，但事实证明我的问题不是，所以我重新改写并尝试解决我的问题。

我有一个导航列表，有些项目里面有一个子导航列表
每个具有子导航的项目都有一个切换箭头，您可以单击它
我希望子导航 <ul> 从高度 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>

我上一个问题的答案给了我这个脚本：

$(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。我也不想对仅 CSS 下拉菜单使用 max-height 解决方案。那是我的后备。

DEMO

【问题讨论】：

你能创建Fiddle吗？
何必为身高而烦恼？您只需点击即可.toggle()您的元素，无需设置任何高度。
@RokoC.Buljan - 没有 JS 转换？
@davidpauljunior 什么过渡？ .toggle() 只是切换元素的 display:inline/block 和 display:none;。
为什么要用 CSS 制作动画？ jQuery 有什么问题？ jQuery 将使您的动画也可用于非 HTML5 浏览器

标签： javascript jquery css

【解决方案1】：

这是一种方法：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;

}

【讨论】：

【解决方案2】：

你的代码逻辑有一些问题，所以我做了一些修改。

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

【讨论】：