从简单列表创建下拉菜单

Hai Tien 发表于 Dev

海天

我的当前列表如下所示：

<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>

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

用户名

您可以使用以下逻辑来达到所需的效果。

创建一个公共缓存变量以保存上一个顶级菜单。
循环浏览所有菜单列表项，以检查文本是否以下划线开头。
- 如果是这样，请将其附加到上一个顶级菜单。
- 如果不是，则将新的无序列表元素附加到此列表项，并将新列表缓存在先前的顶级菜单变量中。
循环结束后，您可以选择所有空列表并将其删除（.find('ul:empty').remove()）。

在以下示例中，在某些情况下，我偏爱本机DOM API方法而不是jQuery对应方法，因为：

$(this).append('<ul></ul>')返回$(this)而不是新创建的列表。解决方法是添加另一行代码，或者仅使用DOM APIthis.appendChild($('<ul>')[0])来返回新创建的列表。和...
在使用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>