没有调整元素大小的jquery端

【问题标题】：jquery side without resizing element没有调整元素大小的jquery端
【发布时间】：2017-08-29 19:19:17
【问题描述】：

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

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

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

【问题讨论】：

【解决方案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

【讨论】：