从简单列表创建下拉菜单

我有当前列表看起来像：

 
Menu 1
 
_Submenu a
 
_Submenu b
 
_Submenu c
 
Menu 2
 
Menu 3
 
_Submenu x
 
_Submenu y
 
Menu 4
  

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

  
 
Menu 1 
 
_Submenu a
 
_Submenu b
 
_Submenu c
 
 
 
Menu 2
 
Menu 3 
 
_Submenu x
 
_Submenu y
 
 
 
Menu 4
  

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

Answer 1

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

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

在下面的示例中，我赞成使用Native DOM API方法，而不是在几个实例中使用jQuery对应方法，因为：

1. $(this).append('

   ')返回$(this)而不是新创建的列表。 解决方法是添加另一行代码，或者只使用DOM API this.appendChild($('

   ')[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($('
')[0]); } }).find('ul:empty').remove(); 

  
 
Menu 1
 
_Submenu a
 
_Submenu b
 
_Submenu c
 
Menu 2
 
Menu 3
 
_Submenu x
 
_Submenu y
 
Menu 4
  

Answer 2

 // Create custom selectors $.extend($.expr[':'], { startsWith: function(e, i, m) { return $(e).text().trim().indexOf(m[3]) === 0; } }); $("li:not(:startsWith(_))").each(function(){ // LI that are not _Sub if($(this).next("li:startsWith(_)").length) // If my next() is _Sub, start grouping: $("
", { html: $(this).nextUntil("li:not(:startsWith(_))"), appendTo: this }); }); 

  
 
Menu 1
 
_Submenu a
 
_Submenu b
 
_Submenu c
 
Menu 2
 
Menu 3
 
_Submenu x
 
_Submenu y
 
Menu 4
  

Answer 3

 $('.group1').wrapAll('
'); $('.group2').wrapAll('
'); 

  
 
Menu 1 
 
_Submenu a 
 
_Submenu b 
 
_Submenu c 
 
Menu 2 
 
Menu 3 
 
_Submenu x 
 
_Submenu y 
 
Menu 4