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

发布于 12-11 18:16 字数 2421 浏览 0 评论 0原文

我正在构建一个响应式菜单,该菜单可根据屏幕尺寸进行缩放。当屏幕尺寸发生变化时,我需要隐藏一些 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**

函数 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();

}

}

$(文档).ready(function(){

    menuOrder();

    $(window).resize(function() {

        menuOrder();
    });

});

I am building a responsive menu that scales dependent on screen size. i need to hide some li's and rearrange another when the screen size changes, then when the screen size is resized back to its original size all elements need to revert back to the way they where.

I kinda got it working when I resize the window, but I'm batteling to get it back to its original state

this is my code:

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

}

}

$(document).ready(function(){

    menuOrder();

    $(window).resize(function() {

        menuOrder();
    });

});

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

最好是你2024-12-18 18:16:34

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

编辑:

捕获原始菜单(在页面加载时操作它之前执行此操作):

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

写回原始菜单:

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

Why not stash the innerHTML of your menu in a variable at load time, then just write it back onto the DOM when you need a fresh copy. No need to "un-do" anything this way.

EDIT:

capture the original menu (do this before manipulating it, when the page loads):

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

write-back the original menu:

$('#main-nav').html(originalMenu)
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文