javascript - jQuery 在单击时在同级上设置高度

Question

之前我问过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。我也不想使用 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/