从简单列表创建下拉菜单

时间:2015-11-25 04:01:20

标签: jquery list

我的当前列表如下:

<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;将作为主要项目的下拉项目添加。谢谢你的帮助。

3 个答案:

答案 0 :(得分:8)

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

  1. 创建一个公共缓存变量来保存上一个顶级菜单。
  2. 遍历所有菜单列表项,检查文本是否以下划线开头。
    • 如果是,请将其附加到上一个顶级菜单。
    • 如果没有,请将新的无序列表元素附加到此列表项,并将新列表缓存到上一个顶级菜单变量中。
  3. 循环完成后,您可以选择所有空列表并将其删除(.find('ul:empty').remove())。
  4. 在下面的示例中,我赞成使用Native DOM API方法,而不是在几个实例中使用jQuery对应方法,因为:

    1. $(this).append('<ul></ul>')返回$(this)而不是新创建的列表。解决方法是添加另一行代码,或者只使用返回新创建的列表的DOM API this.appendChild($('<ul>')[0])。而且......
    2. 在使用DOM API的情况下使用jQuery似乎很浪费。 请参阅:youmightnotneedjquery.com
    3. 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>
      

答案 1 :(得分:4)

&#13;
&#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;
&#13;
&#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>

答案 2 :(得分:1)

$('.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结构。