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>

这意味着主要项目之后的一些项目有＆＃34; _＆＃34;将作为主要项目的下拉项目添加。谢谢你的帮助。

Answer 1

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

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

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

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

Answer 2

＆＃13;

// 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:
  $("<ul/>", {
    html: $(this).nextUntil("li:not(:startsWith(_))"),
    appendTo: this
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

以下是HTML结果：

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

$('.group1').wrapAll('<ul></ul>');
$('.group2').wrapAll('<ul></ul>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li><a href="#">Menu 1</a>
  </li>
  <li class='group1'><a href="#">_Submenu a</a>
  </li>
  <li class='group1'><a href="#">_Submenu b</a>
  </li>
  <li class='group1'><a href="#">_Submenu c</a>
  </li>
  <li><a href="#">Menu 2</a>
  </li>
  <li><a href="#">Menu 3</a>
  </li>
  <li class='group2'><a href="#">_Submenu x</a>
  </li>
  <li class='group2'><a href="#">_Submenu y</a>
  </li>
  <li><a href="#">Menu 4</a>
  </li>
</ul>

试试这种方式

使用.wrap()

描述：围绕匹配元素集中的每个元素包装HTML结构。

使用.wrapAll()

描述：围绕匹配元素集中的所有元素包装HTML结构。

从简单列表创建下拉菜单

3 个答案: