Многоуровневое выпадающее меню. Как получить исходное состояние?

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

Я хотел бы добавить hiddeninput в HTML, где исходное состояние будет хранить и читать его оттуда и использовать его. В качестве альтернативы вы можете передать исходное состояние как значение JSON в свой код Javascript.