Question

我正在从简单的无序列表构建菜单。菜单只有顶级和一个子级别。目标是为子菜单制作两个列布局，我已经为此工作了静态HTML和CSS。唯一的问题是我需要使用动态列表来完成这项工作。

基本上我需要jQuery脚本，它将遍历所有子菜单列表并将它们分成两个相等的子菜单列表。顶级菜单具有唯一的类，如果脚本可以向新的子菜单列表（column01，column02）添加唯一的类，那将会很棒。

以下是源代码：

<ul>
  <li class="menu01"> 
    <a href="#">First menu</a>
    <ul>
      <li>First 01</li>
      <li>First 02</li>
      <li>First 03</li>
      <li>First 04</li>
      <li>First 05</li>
    </ul>
  </li>
  <li class="menu02"> 
    <a href="#">Second menu</a>
    <ul>
      <li>Second 01</li>
      <li>Second 02</li>
      <li>Second 03</li>
      <li>Second 04</li>
      <li>Second 05</li>
    </ul>
  </li>
</ul>

这就是我想要实现的目标：

<ul>
  <li class="menu01"> 
    <a href="#">First menu</a>
    <ul class="column01">
      <li>First 01</li>
      <li>First 02</li>
      <li>First 03</li>
    </ul>
    <ul class="column02">
      <li>First 04</li>
      <li>First 05</li>
    </ul>
  </li>
  <li class="menu02"> 
    <a href="#">Second menu</a>
    <ul class="column01">
      <li>Second 01</li>
      <li>Second 02</li>
      <li>Second 03</li>
    </ul>
    <ul class="column01">
      <li>Second 04</li>
      <li>Second 05</li>
    </ul>
  </li>
</ul>

您也可以在jsFiddle上抓住这个。

谢谢！

Answer 1

CSS是一种优雅的方式。如果您的用户不使用现代浏览器，您可以执行以下操作：

$(".menu01 > ul, .menu02 > ul").each(function() {
    var $ul = $(this).addClass("column01"), // Let original be first column
        $lis = $ul.children(), // Find all children `li` elements
        mid = Math.floor($lis.length / 2), // Calculate where to split
        $newCol = $('<ul />', {"class": "column02"}).insertAfter($ul); // Create new column and add after original. "class" needs to be in quotes because it's a reserved keyword

    $lis.each(function(i) {
        i > mid && $(this).appendTo($newCol); // Move `li` elements with index greater than middle
    });
});

（Working demo）

输出：

  <li class="menu01"> 
    <a href="#">First menu</a>
    <ul class="column01">
      <li>First 01</li>
      <li>First 02</li>
      <li>First 03</li>
    </ul>
    <ul class="column02">
      <li>First 04</li>
      <li>First 05</li>
    </ul>
  </li>
  <li class="menu02"> 
    <a href="#">Second menu</a>
    <ul class="column01">
      <li>Second 01</li>
      <li>Second 02</li>
      <li>Second 03</li>
    </ul>
    <ul class="column02">
      <li>Second 04</li>
      <li>Second 05</li>
    </ul>
  </li>

使用jQuery在两个相等的列表中拆分多个无序列表

1 个答案: