0
由于移动设备没有悬停状态,因此我试图在每次有子节点时删除第一个il元素上的链接,并将它们克隆作为自己的孩子(与链接)。如何从所有父元素中删除链接并将它们作为子元素克隆它们
<ul id="menu-header-menu">
<!--this li has children so link should be removed -->
<li class="menu-item-has-children"><a href="http://url.com/porfolio">Portfolio</a>
<ul class="sub-menu">
<li><a href="http://url.com/paint">Painting</a></li>
<li><a href="http://url.com/vid">Video</a></li>
</ul>
</li>
<!--this li doesn't have children so link should NOT be removed -->
<li><a href="http://url.com/about">About</a></li>
</ul>
我希望做同样的页脚菜单:
<ul id="menu-footer-menu">
<!--this li has children so link should be removed -->
<li class="menu-item-has-children"><a href="http://url.com/links">Links</a>
<ul class="sub-menu">
<li><a href="http://url.com/doc">Documents</a></li>
<li><a href="http://url.com/ext">Extra</a></li>
<li><a href="http://url.com/photo">Photos</a></li>
</ul>
</li>
<!--this li doesn't have children so link should NOT be removed -->
<li><a href="http://url.com/contact/">Contact</a></li>
</ul>
我上一个WordPress网站产生通过PHP这个网站的结构,所以我尽量避免元素的ID。
我正在尝试这个jQuery脚本,但它将两个li都克隆到两个菜单(页眉和页脚),所以我最终得到了每个菜单中的两个克隆。
if($(window).width() <= 980){
$('ul#menu-footer-menu').each(function() {
$(this).find('a:first').clone().appendTo("ul.sub-menu");
$(this).find('a:first').contents().unwrap();
});
$('ul#menu-header-menu').each(function() {
$(this).find('a:first').clone().appendTo("ul.sub-menu");
$(this).find('a:first').contents().unwrap();
});
}
可以帮我一把吗?