CSS 过渡不适用于 100% 子菜单答案

【问题标题】：CSS transaction doesn't work in accordion with 100 percent sub menuCSS 过渡不适用于 100% 子菜单
【发布时间】：2022-11-17 13:44:54
【问题描述】：

我有一个简单的手风琴菜单，使用jQuery 和CSS 事务来显示子菜单。像这样：

HTML:

<div class="container">
  <ul class="nk-menu list-unstyled" id="side-menu">
    <li class="nk-menu-item has-sub">
      <a class="nk-menu-link nk-menu-toggle" href="javascript: void(0);">
        <span class="nk-menu-text">First</span>
      </a>
      <ul class="nk-menu-sub">
        <li class="nk-menu-item">
          <a class="nk-menu-link" href="">
            <span>Sub 1</span>
          </a>
        </li>
      </ul>
    </li>
    <li class="nk-menu-item has-sub">
      <a class="nk-menu-link nk-menu-toggle" href="javascript: void(0);">
        <span class="nk-menu-text">Second</span>
      </a>
    </li>
  </ul>
</div>

查询：

$(document).on('click', '.nk-menu-toggle', function(e) {
  e.preventDefault();
  let $this = $(this);
  if ($this.parent().hasClass('active')) {
    $this.parent().removeClass('active');
  } else {
    $('.nk-menu').find('li').removeClass('active');
    $this.closest('li').toggleClass('active');
  }
});

CSS：

.nk-menu-sub {
  border-top: 1px solid #2a4163;
  background: #8FBC8F;
  padding: 0px 15px;
  margin: 0 0 7px 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  position: relative;
  opacity: 0;
  -webkit-transition: .7s ease;
  -moz-transition: .7s ease;
  -o-transition: .7s ease;
  transition: .7s ease;
}

.active>.nk-menu-sub {
  height: 50px; // change this line to 100%
  opacity: 1;
  padding: 15px;
}

实际上，此代码确实适用于特定大小，例如 50px 用于 sub menu，但是当我需要将 height 更改为 100% 用于 .active>.nk-menu-sub 中的动态区域时，css 事务不起作用并且 @987654332 @有延迟和滞后。

我该如何解决这个问题？！

演示HERE

【问题讨论】：

标签： html jquery css css-transitions

【解决方案1】：

根据您的代码 height value 是为他们提供一些价值所必需的。因此，我已根据您的要求修改了您的代码。我希望你喜欢它。

请参考链接Demo

【讨论】：