jquery - 从简单列表创建下拉菜单

Question

我当前的列表如下所示:

<ul>
   <li><a href="#">Menu 1</a></li>
   <li><a href="#">_Submenu a</a></li>
   <li><a href="#">_Submenu b</a></li>
   <li><a href="#">_Submenu c</a></li>
   <li><a href="#">Menu 2</a></li>
   <li><a href="#">Menu 3</a></li>
   <li><a href="#">_Submenu x</a></li>
   <li><a href="#">_Submenu y</a></li>
   <li><a href="#">Menu 4</a></li>
</ul>

如何使用 Jquery 创建这样的下拉菜单。

  <ul>
      <li><a href="#">Menu 1</a>
         <ul>
           <li><a href="#">_Submenu a</a></li>
           <li><a href="#">_Submenu b</a></li>
           <li><a href="#">_Submenu c</a></li>
         </ul>
      </li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a>
         <ul>
            <li><a href="#">_Submenu x</a></li>
            <li><a href="#">_Submenu y</a></li>
         </ul>
      </li>
      <li><a href="#">Menu 4</a></li>
 </ul>

这意味着主项目之后带有“_”的一些项目将被添加为主项目的下拉项目。感谢您的帮助。

Answer 1

您可以通过使用以下逻辑来实现您正在寻找的效果。

1. 创建一个公共(public)缓存变量来保存之前的顶级菜单。
2. 循环遍历所有菜单列表项，检查文本是否以下划线开头。
   • 如果是，请将其附加到上一个顶级菜单中。
   • 如果没有，则将一个新的无序列表元素附加到此列表项，并将新列表缓存在之前的顶级菜单变量中。
3. 循环完成后，您可以选择所有空列表并将其删除 ( .find('ul:empty').remove() )。

在下面的示例中，在某些情况下我更喜欢 Native DOM API 方法而不是 jQuery 方法，因为:

1. $(this).append('<ul></ul>')返回$(this)而不是新创建的列表。解决方法是添加另一行代码，或者仅使用 DOM API this.appendChild($('<ul>')[0])它确实返回新创建的列表。还有...
2. 在使用 DOM API 一样简单的情况下使用 jQuery 似乎很浪费。 ^{参见:youmightnotneedjquery.com}

var prev;
$('.menu li').each(function(){
    if(/^_/.test(this.textContent) && prev) {
        prev.appendChild(this);
    } else {
        prev = this.appendChild($('<ul>')[0]);
    }
}).find('ul:empty').remove();

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<ul class="menu">
   <li><a href="#">Menu 1</a></li>
   <li><a href="#">_Submenu a</a></li>
   <li><a href="#">_Submenu b</a></li>
   <li><a href="#">_Submenu c</a></li>
   <li><a href="#">Menu 2</a></li>
   <li><a href="#">Menu 3</a></li>
   <li><a href="#">_Submenu x</a></li>
   <li><a href="#">_Submenu y</a></li>
   <li><a href="#">Menu 4</a></li>
</ul>

上面的示例产生以下 HTML 结构:

<ul class="menu">
    <li><a href="#">Menu 1</a>
        <ul>
            <li><a href="#">_Submenu a</a></li>
            <li><a href="#">_Submenu b</a></li>
            <li><a href="#">_Submenu c</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a>
        <ul>
            <li><a href="#">_Submenu x</a></li>
            <li><a href="#">_Submenu y</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 4</a></li>
</ul>