没有调整元素大小的 jquery 端

Question

我有一个使用 css 列的下拉菜单，当我使用 jquery slide() 时，它会调整下拉框的大小，并重排内容直到达到完整高度。

这是一个工作示例 https://codepen.io/petergus/pen/dvrrGj

有没有一种替代方法可以简单地向下滑动并显示已经调整大小的元素(在 display:none 状态下等待)？

Answer 1

您需要将 ul.sub-menu 元素包装在另一个容器中，然后调整其大小:

  <ul>
    <li class="sub-menu-parent">
      <a href="#">Menu Item 1</a>
      <div class="sub-menu">
        <ul>
          <li><a href="#">Sub Item 1</a></li>
          <li><a href="#">Sub Item 2</a></li>
          <li><a href="#">Sub Item 3</a></li>
          <li><a href="#">Sub Item 4</a></li>
        </ul>
      </div>

这将需要重构您的 CSS 以适应更改。开始于:

nav {
  position: relative;
}

nav > ul > li > .sub-menu {
  position: absolute;
  left: 0;
  width: 100%;
  display: none;
}

.sub-menu ul {
  columns: 5;
  width: 100%;
  left: 0px;
}

https://codepen.io/mblase75/pen/bqZJbg