Question

由于移动设备没有悬停状态，我试图在每次有子节点时删除第一个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生成这个html结构，所以我试图避免使用元素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();
    });
}

可以帮我一把吗？

Answer 1

好的，明白了。我只需要找到合适的地方来追加克隆的李。

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();
    });
}

如何从所有父元素中删除链接并将其克隆为子元素

1 个答案: