[英]How to remove the link from all parent elements and clone them as a child elements
Because mobile devices do not have a hover state, I am trying to remove the links on the first il elements every time these have children, and clone them as children of themselves (with link). 由于移动设备没有悬停状态,因此,我尝试在每当第一个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>
And I want to do the same in the footer menu: 我想在页脚菜单中执行相同的操作:
<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>
I am generating this html structure through php on a WordPress website so I am trying to avoid element ID's. 我正在WordPress网站上通过php生成此html结构,因此我试图避免使用元素ID。
I am trying this jQuery script, but it clones both li onto both menus (header and footer) so I end up with two clones of each, one in each menu. 我正在尝试使用此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();
});
}
Could give me a hand? 能帮我一下吗?
Ok, got it. 好的,我知道了。 I just needed to target the right place to append the cloned li. 我只需要针对正确的位置来附加克隆的li。
if($(window).width() <= 980){
$('ul#menu-footer-menu').each(function() {
$(this).find('a:first').clone().appendTo( "ul#menu-footer-menu > li.menu-item-has-children > ul.sub-menu" );
$(this).find('a:first').contents().unwrap();
});
$('ul#menu-header-menu').each(function() {
$(this).find('a:first').clone().appendTo( "ul#menu-header-menu > li.menu-item-has-children > ul.sub-menu" );
$(this).find('a:first').contents().unwrap();
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.