Question

我是JQuery的新手，我有以下问题。

在页面中我有2个菜单由2个不同的无序列表实现，类似这样：

1） MENU 1 class =“nav single-page-nav”：

<ul class="nav single-page-nav">
    <li>
        <a href="http://localhost/onyx/#section-45">Chi siamo</a>
    </li>
    <li>
        <a href="http://localhost/onyx/#section-27">Servizi</a>
    </li>
    <li>
        <a href="http://localhost/onyx/#section-174">Aggiornamenti</a>
    </li>
    <li>
        <a href="http://localhost/onyx/#section-121">Contattaci</a>
    </li>
</ul>

2） MENU 2 有class = nav

<ul id="menu-language" class="nav">
    <li id="menu-item-422" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-422">
        <a href="http://localhost/onyx/prova/">prova cat</a>
    </li>

    <li id="menu-item-185" class="qtranxs-lang-menu qtranxs-lang-menu-it menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-185">
        ..............................
        SOMETHING
        ..............................
    </li>
</ul>

所以，出于某种原因，在我的页面中我需要2个菜单，但是当浏览器窗口较小时（主要是当网站显示在智能手机中时），第二个菜单不显示（并且没有问题）我需要将第二个菜单的

元素放入第一个菜单（在其元素之后）。

所以我做了类似的事情：

jQuery(document).ready(function($){
   ............................................
   ............................................
   ............................................

$(window).resize(function() {
    //alert("INTO resize")

    windowWidthResized = $(window).width();
    //alert(windowWidthResized);
    console.log("WINDOWS WIDTH: " + windowWidthResized);

    menuItems = new Array();
    menuItems = $('#menu-language > li');
    console.log("NUMBER OF ITEMS IN SECOND MENU: " + menuItems.length);

    /*
    $('#menu-language > li').each(function() {
        console.log($(this).html());
        //alert($(this).html());
    });
    */

    if(windowWidthResized <= 986) {
        console.log("INSERT MENU 2 ITEMS AT THE END OF MENU 1");
    }
});

});

因此，当浏览器窗口改变大小时，我会通过 resize（）方法进行拦截，因此我获得了实际的窗口宽度。

然后，通过 $（'＃menu-language＆gt; li'），我检索包含所有的 menuItems 数组

第二个菜单的元素（以及这些元素的HTML内容）。

现在，如果实际宽度小于986像素，我必须将元素

元素作为 menuItems 第一个菜单末尾的数组（列表 class =“nav single-page-nav”）

我怎样才能完成最后一次操作？

Answer 1

尝试使用.appendTo

$(window).resize(function() {
    //alert("INTO resize")

    windowWidthResized = $(window).width();
    //alert(windowWidthResized);
    console.log("WINDOWS WIDTH: " + windowWidthResized);
    var menuItems = $("#menu-language > li");
    console.log("NUMBER OF ITEMS IN SECOND MENU: " + menuItems.length);

    if(windowWidthResized <= 986) {
        console.log("INSERT MENU 2 ITEMS AT THE END OF MENU 1");
        menuItems.appendTo(".single-page-nav")
    } else {
        // if `li` within `#menu-language` already appended to
        // `.single-page-nav` append `#menu-language li`
        if ($("#menu-language > li").length === 0) {
          $(".single-page-nav li:gt(3)").appendTo("#menu-language")
        }
    }
});

Answer 2

这应该有效：

$(".single-page-nav").append($("#menu-language").html());

Answer 3

一个简短的方法：

$("#menu-language").children().detach().//detach the LIs
appendTo("ul.single-page-nav"); //append

A Demo

因此，您的代码变为：

$(window).resize(function() {

    if($(window).width() <= 986) {
        if ($("#menu-language > li").length) {
            $("#menu-language > li").detach().appendTo("ul.single-page-nav");
        }
    //If you want to reset when the width is more than 986
    } else {
        $("ul.single-page-nav > li").slice(-2).appendTo("#menu-language");
    }
});

Answer 4

我不建议你用javascript复制项目。为什么不使用CSS媒体查询并隐藏子类mobile-hidden或mobile-visible等子项？

但回答你的问题只是创建了一个演示版here。使用这两个按钮演示调整大小。

首先在菜单1中添加id，我已使用menu-1，然后使用这些代码行将元素从menu-language复制到menu-1 }：

var $menuItems = $('#menu-language > li');
$menuItems.addClass('js-menu-1').appendTo('#menu-1');

并将这些复制回来：

var $menuItems = $('#menu-1 > li.js-menu-1');
$menuItems.removeClass('js-menu-1').appendTo('#menu-language');

如何使用JQuery将无序列表的检索<li>元素放在另一个无序列表的末尾？

4 个答案: