Dropdown-Menü mit mehreren Ebenen. Wie bekomme ich den Originalzustand?

Question

Dieses Menü ersetzt den übergeordneten Menüeintrag. Hilfe erhalten ursprünglichen Zustand, wenn Taste Menü drücken. Versuchen Sie $ ('. Navbar-dropdown) .next (' .navbar- dropdown-menu: first-child '). Clone(), kann aber nicht ersetzen, wenn Sie auf die Schaltfläche klicken.

$(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

würde ich eine hiddeninput in den HTML hinzufügen, wo der ursprüngliche Zustand gespeichert und von dort und es wiederverwenden lesen würde. Alternativ könnten Sie den Originalzustand als JSON-Wert an Ihren Javascript-Code übergeben.