jQueryを使用してリスト項目の並び順を変更し、デフォルト値に戻します

Question

私はスクリーンサイズに応じて拡大縮小するレスポンシブメニューを構築しています。私はいくつかの李の隠し、画面サイズが変更されたときに別の並べ替えをする必要がありますし、画面サイズが元のサイズに戻ったときに、すべての要素はどこに戻す必要があります。

私はウィンドウのサイズを変更するとき、私はちょっとそれが働いてしまったが、私は、これは私のコードで元の状態に

をそれを得るためにbattelingだ：

** 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（関数（）{

menuOrder(); 

    $(window).resize(function() { 

     menuOrder(); 
    }); 

}）。

Answer 1

あなたのメニューのinnerHTMLを読み込み時に変数に隠しておき、新しいコピーが必要なときにDOMに書き戻すのはなぜでしょうか？この方法で何かを "やる"必要はありません。

EDIT：オリジナルメニューが

キャプチャ（それを操作する前にこれを行う、ページのロード時）：

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

ライトバックオリジナルメニュー：

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