jQuery:将链接克隆到子菜单中
jQuery: Clone links into sub menus
我有一个带有多个下拉菜单的巨大导航。在触摸设备上,我想禁用节点上的所有 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添加)
- 狗
- 猫
- 两栖动物
…
以下代码对我来说工作正常。
$(".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' ,'#');
我有一个带有多个下拉菜单的巨大导航。在触摸设备上,我想禁用节点上的所有 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添加)
- 狗
- 猫
- 两栖动物
…
以下代码对我来说工作正常。
$(".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' ,'#');