マルチレベルドロップダウンメニュー。どのように元の状態になるのですか？

Question

このメニューは、親メニュー項目に置き換わります。 ボタンメニューを押すと元の状態に戻ります。 $（ '。navbar-dropdown）.next（'。navbar-dropdown-menu：first-child '）.clone（）をクリックします。

$(function() { 
 
$(document).on("click", function (e) { 
 
    var target = $(e.target); 
 
    
 
    if (!(target).is('.navbar-dropdown-menu')) { 
 
    $('.navbar-dropdown-content').hide(); 
 
    } 
 
}); 
 
    
 
$('.navbar-dropdown-menu').on("click", function (e) { 
 
    e.stopPropagation(); 
 
    e.preventDefault(); 
 
    $(this).parent('.navbar-dropdown-content').replaceWith($(this).next('.navbar-dropdown-content').toggle()); 
 
\t 
 
    }); 
 
});

.navbar-dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background: gray; 
 
} 
 
.navbar-dropdown-content a { 
 
    display: block; 
 
    padding: .5em 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="navbar-dropdown"> 
 
\t <button class="navbar-dropdown-menu" type="button">Menu</button> 
 
\t <div class="navbar-dropdown-content"> 
 
     <a href="#" class="navbar-dropdown-menu">1 item</a> 
 
     <div class="navbar-dropdown-content"> 
 
      <a href="#" class="navbar-dropdown-menu">1.1 item</a> 
 
      <div class="navbar-dropdown-content"> 
 
       <a href="#" class="navbar-dropdown-menu">1.1.1 item</a> 
 
       <a href="#" class="navbar-dropdown-menu">1.1.2 item</a> 
 
       <a href="#" class="navbar-dropdown-menu">1.1.3 item</a> 
 
      </div> 
 
      <a href="#" class="navbar-dropdown-menu">1.2 item</a> 
 
     </div> 
 
     <a href="#" class="navbar-dropdown-menu">2 item</a> 
 
     <div class="navbar-dropdown-content"> 
 
      <a href="#" class="navbar-dropdown-menu">2.1 item</a> 
 
      <a href="#" class="navbar-dropdown-menu">2.2 item</a> 
 
      <a href="#" class="navbar-dropdown-menu">2.3 item</a> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

私は、元の状態が保存され、そこからそれを読んで、それを再利用することになるHTMLにhiddeninputを追加します。あるいは、元の状態をJavascriptコードにJSON値として渡すこともできます。