jQuery：将链接克隆到子菜单中

Question

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

以下代码适用于第一级，但它也必须适用于深度嵌套的菜单。谁能帮忙？

$('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>

我想要的结构如下所示：

动物（link 已在此处删除）
- 关于：动物（这个应该通过jquery添加）
- 鸟类（link 已在此处删除）
  - 关于：鸟（这个应该通过jquery添加）
  - 海鸟（link 此处删除）
  - 关于：海鸟（这个应该通过jquery添加）
  - 海鸥
  - 海鹰
- 爬行动物
- 鱼类
- 哺乳动物（link 此处已删除）
  - 关于：哺乳动物（这个应该通过jquery添加）
  - 两足动物（link 在此处删除）
  - 关于：两足动物（这个应该通过jquery添加）
  - 猴子
  - 人类
  - 四足动物（link 此处删除）
  - 关于：四足（这个应该通过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' ,'#');

jQuery：将链接克隆到子菜单中

jQuery: Clone links into sub menus

jquery

nested

cloning