javascript - 将 UL 拆分为两列，但不要破坏嵌套的 UL

<分区>

我正在尝试将 LI 中带有嵌套 UL 的 UL 分成两列，而我已经能够使用

.grid-list {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 3;
}

但嵌套的 UL 正在损坏(一些在第 1 列中，一些在第 2 列中，具体取决于中断的位置)，我想将它们放在一起。如果您查看下面的屏幕截图，您会看到“规划和分区”位于底部，如果可能的话，我希望将其放在下一栏的顶部。我正在使用的 UL 如下。知道如何使用一些 jQuery 或简单的 css 来做到这一点吗？这是一个挑战!

这是我的代码:

<div class="mega-menu">
   <ul class="sub-nav">
      <li>
         <a href="#" id="Village Council" target="">Village Council</a>
         <ul>
            <li>
               <a href="#" id="Agendas &amp; Minutes" target="">Agendas &amp; Minutes</a>
            </li>
         </ul>
      </li>
      <li>
         <a href="#" id="Boards" target="">Boards</a>
         <ul>
            <li>
               <a href="#" id="Planning Board" target="">Planning Board</a>
            </li>
            <li>
               <a href="#" id="Board of Adjustment" target="">Board of Adjustment</a>
            </li>
            <li>
               <a href="#" id="Parks, Recreation, and Greenways Board" target="">Parks, Recreation, and Greenways Board</a>
            </li>
            <li>
               <a href="#" id="Committees" target="">Committees</a>
            </li>
         </ul>
      </li>
      <li>
         <a href="#" id="Ordinances" target="">Ordinances</a>
      </li>
      <li>
         <a href="#" id="Finance &amp; Tax" target="">Finance &amp; Tax</a>
         <ul>
            <li>
               <a href="#" id="Budgets &amp; Reports" target="">Budgets &amp; Reports</a>
            </li>
            <li>
               <a href="#" id="Taxes" target="">Taxes</a>
            </li>
            <li>
               <a href="#" id="Contact Finance" target="">Contact Finance</a>
            </li>
         </ul>
      </li>
      <li>
         <a href="#" id="Planning &amp; Zoning" target="">Planning &amp; Zoning</a>
         <ul>
            <li>
               <a href="#" id="Maps" target="">Maps</a>
            </li>
            <li>
               <a href="#" id="Land Use" target="">Land Use</a>
            </li>
            <li>
               <a href="#" id="Permitting" target="">Permitting</a>
            </li>
            <li>
               <a href="#" id="Ordinances" target="">Ordinances</a>
            </li>
            <li>
               <a href="#" id="Projects" target="">Projects</a>
            </li>
         </ul>
      </li>
      <li>
         <a href="#" id="Public Safety" target="">Public Safety</a>
      </li>
      <li>
         <a href="#" id="Parks &amp; Recreation" target="">Parks &amp; Recreation</a>
         <ul>
            <li>
               <a href="#" id="Marvin Efird Park" target="">Marvin Efird Park</a>
            </li>
            <li>
               <a href="#" id="Reserve the Barn" target="">Reserve the Barn</a>
            </li>
            <li>
               <a href="#" id="Trails &amp; Greenways" target="">Trails &amp; Greenways</a>
            </li>
         </ul>
      </li>
      <li>
         <a href="#" id="Transportation" target="">Transportation</a>
      </li>
      <li>
         <a href="#" id="Staff Directory" target="">Staff Directory</a>
      </li>
   </ul>
</div>

最佳答案

您可以利用 break-inside/page-break-inside CSS 属性来避免 li 中间的分栏元素。这两个属性做同样的事情，但它们在这里串联使用以实现更广泛的浏览器兼容性。

body {
  background-color: #777;
}
.mega-menu {
  column-count: 2;
}
ul {
  margin-top: 0;
}
li {
  list-style-type: none;
}
li a {
  color: #9d9;
  text-decoration: none;
}
li li a {
  color: #fff;
}
li {
  page-break-inside: avoid;
  break-inside: avoid-column;
}

<div class="mega-menu">
  <ul class="sub-nav">
    <li>
      <a href="#" id="Village Council" target="">Village Council</a>
      <ul>
        <li>
          <a href="#" id="Agendas &amp; Minutes" target="">Agendas &amp; Minutes</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#" id="Boards" target="">Boards</a>
      <ul>
        <li>
          <a href="#" id="Planning Board" target="">Planning Board</a>
        </li>
        <li>
          <a href="#" id="Board of Adjustment" target="">Board of Adjustment</a>
        </li>
        <li>
          <a href="#" id="Parks, Recreation, and Greenways Board" target="">Parks, Recreation, and Greenways Board</a>
        </li>
        <li>
          <a href="#" id="Committees" target="">Committees</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#" id="Ordinances" target="">Ordinances</a>
    </li>
    <li>
      <a href="#" id="Finance &amp; Tax" target="">Finance &amp; Tax</a>
      <ul>
        <li>
          <a href="#" id="Budgets &amp; Reports" target="">Budgets &amp; Reports</a>
        </li>
        <li>
          <a href="#" id="Taxes" target="">Taxes</a>
        </li>
        <li>
          <a href="#" id="Contact Finance" target="">Contact Finance</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#" id="Planning &amp; Zoning" target="">Planning &amp; Zoning</a>
      <ul>
        <li>
          <a href="#" id="Maps" target="">Maps</a>
        </li>
        <li>
          <a href="#" id="Land Use" target="">Land Use</a>
        </li>
        <li>
          <a href="#" id="Permitting" target="">Permitting</a>
        </li>
        <li>
          <a href="#" id="Ordinances" target="">Ordinances</a>
        </li>
        <li>
          <a href="#" id="Projects" target="">Projects</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#" id="Public Safety" target="">Public Safety</a>
    </li>
    <li>
      <a href="#" id="Parks &amp; Recreation" target="">Parks &amp; Recreation</a>
      <ul>
        <li>
          <a href="#" id="Marvin Efird Park" target="">Marvin Efird Park</a>
        </li>
        <li>
          <a href="#" id="Reserve the Barn" target="">Reserve the Barn</a>
        </li>
        <li>
          <a href="#" id="Trails &amp; Greenways" target="">Trails &amp; Greenways</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#" id="Transportation" target="">Transportation</a>
    </li>
    <li>
      <a href="#" id="Staff Directory" target="">Staff Directory</a>
    </li>
  </ul>
</div>

关于javascript - 将 UL 拆分为两列，但不要破坏嵌套的 UL，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65385879/

上一篇：php - 在 PHP 中将两个数组合并在一起？

下一篇：javascript - NextJS 无法识别 TypeScript 文件

相关文章：

javascript - 防止用户在 javascript 中离开我的页面

javascript - 从对象数组中删除重复项

javascript - 在 Javascript 中访问 Razor bool 变量时出错

css - 如何让div与一个 "position: fixed"容器重叠并垂直滚动固定容器内容

jquery - 调整窗口大小时用另一个 div 替换 div

javascript - body 高度改变后保持滚动位置

javascript - 如何从文本正文中删除特定元素？

javascript - 如何让js函数在不同页面之间保持运行？

php - 如何修复使用 PHP 计算纯文本字数的错误？

css - 在 scss 中添加全局父选择器