使用 jQuery 重新排列列表项的顺序,并将它们恢复为默认值
我正在构建一个响应式菜单,该菜单可根据屏幕尺寸进行缩放。当屏幕尺寸发生变化时,我需要隐藏一些 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();
});
});
为什么不在加载时将菜单的 innerHTML 存储在变量中,然后在需要新副本时将其写回到 DOM 中。不需要以这种方式“撤消”任何事情。
编辑:
捕获原始菜单(在页面加载时操作它之前执行此操作):
写回原始菜单:
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):
write-back the original menu: