jQuery：克隆链接到子菜单

Question

我有一个带有多个下拉菜单的巨大导航。在触摸设备上，我想禁用节点上的所有链接，并将这些链接作为第一个孩子克隆到它们的子菜单中。

以下代码适用于第一级，但它也必须适用于深度嵌套的菜单。任何人都可以帮忙吗？

$('nav > ul > li > a').each(function(index, value) {
  $("nav > ul > li.has-sub-menu:nth-child(" + index + ") > a")
    .clone()
    .insertBefore(".has-sub-menu:nth-child(" + index + ") > ul > li:first-child")
    .wrap('<li></li>')
    .prepend("About: ");
});

$('.has-sub-menu > a').removeAttr('href', '#');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav class="site-nav">
  <ul>
    <li class="has-sub-menu"><a href="http://some-link.io">Animals</a>
      <ul class="sub-menu">
        <li class="has-sub-menu"><a href="http://some-link.io">Birds</a>
          <ul class="sub-menu">
            <li class="has-sub-menu"><a href="http://some-link.io">Seabirds</a>
              <ul class="sub-menu">
                <li>
                  <a href="http://some-link.io">Gull</a>
                </li>
                <li>
                  <a href="http://some-link.io">Sea Eagle</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <a href="http://some-link.io">Reptiles</a>
        </li>
        <li>
          <a href="http://some-link.io">Fishes</a>
        </li>
        <li class="has-sub-menu">
          <a href="http://some-link.io">Mammals</a>
          <ul class="sub-menu">
            <li class="has-sub-menu">
              <a href="http://some-link.io">Bipeds</a>
              <ul class="sub-menu">
                <li>
                  <a href="http://some-link.io">Monkeys</a>
                </li>
                <li>
                  <a href="http://some-link.io">Humans</a>
                </li>
              </ul>
            </li>
            <li class="has-sub-menu">
              <a href="http://some-link.io">Quadruped</a>
              <ul class="sub-menu">
                <li><a href="http://some-link.io">Dogs</a>
                </li>
                <li><a href="http://some-link.io">Cats</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="http://some-link.io">Amphibians</a>
        </li>
      </ul>
    </li>
    <li class="has-sub-menu current-menu-item">
      <a href="http://some-link.io">Cars</a>
      <ul class="sub-menu">
        <li class="has-sub-menu">
          <a href="http://some-link.io">European-Cars</a>
          <ul class="sub-menu">
            <li class="has-sub-menu">
              <a href="http://some-link.io">German Cars</a>
              <ul class="sub-menu">
                <li>
                  <a href="http://some-link.io">Volkswagen</a>
                </li>
                <li>
                  <a href="http://some-link.io">Porsche</a>
                </li>
                <li>
                  <a href="http://some-link.io">Merzedes Benz</a>
                </li>
                <li>
                  <a href="http://some-link.io">Audi</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="http://some-link.io">Dutch Cars</a>
            </li>
            <li>
              <a href="http://some-link.io">Belgian Cars</a>
            </li>
            <li class="has-sub-menu">
              <a href="http://some-link.io">Italian Cards</a>
              <ul class="sub-menu">
                <li>
                  <a href="http://some-link.io">Ferrari</a>
                </li>
                <li>
                  <a href="http://some-link.io">Fiat</a>
                </li>
                <li>
                  <a href="http://some-link.io">Alfa Romeo</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="has-sub-menu">
          <a href="http://some-link.io">Asian Cards</a>
          <ul class="sub-menu">
            <li class="has-sub-menu">
              <a href="http://some-link.io">Japanese Cars</a>
              <ul class="sub-menu">
                <li>
                  <a href="http://some-link.io">Toyota</a>
                </li>
                <li>
                  <a href="http://some-link.io">Mazda</a>
                </li>
                <li>
                  <a href="http://some-link.io">Honda</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="has-sub-menu">
          <a href="http://some-link.io">US Cars</a>
          <ul class="sub-menu">
            <li>
              <a href="http://some-link.io">Ford</a>
            </li>
            <li>
              <a href="http://some-link.io">Jeep</a>
            </li>
            <li>
              <a href="http://some-link.io">Dodge</a>
            </li>
            <li>
              <a href="http://some-link.io">Buick</a>
            </li>
          </ul>
        </li>
        <li class="has-sub-menu">
          <a href="http://some-link.io">African Cars</a>
          <ul class="sub-menu">
            <li>
              <a href="http://some-link.io">Ramses</a>
            </li>
            <li>
              <a href="http://some-link.io">Tarantula</a>
            </li>
            <li>
              <a href="http://some-link.io">Birkin</a>
            </li>
            <li>
              <a href="http://some-link.io">Ranger</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="http://some-link.io">Australian Cars</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="http://some-link.io">Drinks</a>
    </li>
    <li>
      <a href="http://some-link.io">Cigaretts</a>
    </li>
    <li class="has-sub-menu">
      <a href="http://some-link.io">Colors</a>
      <ul class="sub-menu sub-menu-left">
        <li>
          <a href="http://some-link.io">Red</a>
        </li>
        <li>
          <a href="http://some-link.io">Yellow</a>
        </li>
        <li>
          <a href="http://some-link.io">Green</a>
        </li>
        <li>
          <a href="http://some-link.io">Blue</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

我想要的结构是这样的：

• 动物（此处已删除链接）
  • 关于：动物（这个应该通过jquery添加）
  • 鸟类（此处已删除链接）
    • 关于：鸟（这个应该通过jquery添加）
    • 海鸟（此处已删除链接）
    • 关于：Seabirds（这个应该通过jquery添加）
    • 海鸥
    • 海鹰
  • 爬行动物
  • 鱼
  • 哺乳动物（此处已删除链接）
    • 关于：哺乳动物（这个应该通过jquery添加）
    • Biped（此处已删除链接）
    • 关于：Bipeds（这个应该通过 jquery 添加）
    • 猴子
    • 人类
    • 四足动物（此处已删除链接）
    • 关于：Quadrupted（这个应该通过jquery添加）
    • 狗
    • 猫
  • 两栖类

…

Answer 1

以下代码对我来说很好用。

$(".sub-menu > li:first-child").each(function(){
    var parent = $(this).parent('ul').parent('.has-sub-menu');   
    var copy = parent.clone();
    $(copy).removeClass("has-sub-menu").find(".sub-menu").remove(); 
    $(copy).prepend('Über: ');     
    $(this).before(copy);
});

$('.has-sub-menu > a').attr('href' ,'#');