jQuery：克隆链接到子菜单

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

以下代码对于第一级非常适用，但它也必须在深度嵌套菜单上工作。谁能帮忙？

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

我的期望strukture看起来是这样的：

动物（点击这里删除）
- 关于：动物（这应该通过jQuery添加）
- 鸟类（链接在这里删除）
  - 关于：鸟（这应该通过jQuery添加）
  - 海鸟（点击这里删除）
  - 关于：海鸟（这应该通过jQuery添加）
  - 鸥
  - 海鹰
- 爬行动物
- 鱼
- 哺乳动物（点击这里删除）
  - 关于：哺乳动物（这应该通过jQuery添加）
  - 足动物（点击这里删除）
  - 关于：两足动物（这应该通过jQuery添加）
  - 猴子
  - 人类
  - 四足动物（这里的链接删除）
  - 关于：Quadrupted（这应该通过jQuery添加）
  - 狗
  - 猫
- 两栖动物

...

来源

2015-09-24 Jonas

你能举一个它应该在移动设备上看起来应该是什么样子的样子，以及它在桌面上应该是什么样子？我不完全清楚你想完成什么。 – Mark

我必须更新现有网站，并且在用户界面方面我的灵活性为0％。我已经更新了我的帖子以解释所需的行为。 – Jonas

下面的代码工作正常，我。

$(".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' ,'#');

来源

2015-09-28 15:05:31 Jonas

jQuery：克隆链接到子菜单

回答

相关问题