Question

我正在构建一个响应式菜单，可根据屏幕大小进行缩放。当屏幕尺寸发生变化时，我需要隐藏一些li并重新排列另一个li，然后当屏幕尺寸调整回原始尺寸时，所有元素都需要恢复到原来的位置。

当我调整窗口大小时，我有点工作，但我正在努力让它恢复到原来的状态

这是我的代码：

的的 ** HTML * * *

<nav id="main-nav">
        <ul class="menu">
            <li class="login-mobile mobile"><a class="login" href="">login</a></li>
            <li class="signup-mobile mobile"><a class="signup" href="">sign up</a></li>
            <li class="shop-mobile mobile"><a class="shop" href="">shop</a></li>
            <li ><a class="home" href="">home</a></li>
            <li ><a class="about" href="">about</a></li>
            <li ><a class="promo" href="">promo</a>
                <ul class="submenu">
                    <li><a href="">Apple - Free Wi-Fi P</a></li>
                    <li><a href="">Lanseria - FREE Wi-Fi </a></li>
                    <li><a href="">BlackBerry PlayBook</a></li>
                </ul>
            </li>
            <li ><a class="services" href="">services</a></li>
            <li ><a class="tools" href="">tools</a></li>
            <li ><a class="converge" href="">converge</a></li>
            <li ><a class="news" href="">news</a></li>
            <li ><a class="contact" href="">contact</a></li>
            <li class="darkblue_grad"><a class="help" href="">help</a></li>
        </ul>
    </nav>

的的 **的jQuery * *

function menuOrder（）{

 if ($(window).width() > 590) {
    $("nav#main-nav ul.menu li.login-mobile, nav#main-nav ul.menu li.signup-mobile").hide();
var mobile = $("nav#main-nav ul.menu > li.shop-mobile");
mobile.appendTo(mobile.parent("ul.menu")).end();

} else{
    $("nav#main-nav ul.menu li.login-mobile, nav#main-nav ul.menu li.signup-mobile").show();

}

}

（文档）$。就绪（函数（）{

    menuOrder();

    $(window).resize(function() {

        menuOrder();
    });

}）;

Answer 1

为什么不在加载时将菜单的innerHTML存储在变量中，然后在需要新副本时将其写回DOM。不需要以这种方式“取消”任何事情。

修改

捕获原始菜单（在加载页面之前执行此操作）：

var originalMenu = $('#main-nav').html()

回写原始菜单：

$('#main-nav').html(originalMenu)

使用jQuery重新排列列表项的顺序，并将它们恢复为默认值

1 个答案: