Animation des dynamisch generierten Menüs funktioniert nicht richtig

Question

Ich habe ein linkes Menü, das mehrere übergeordnete Menüs und darunter bestimmte untergeordnete Menüs hat. Ich möchte diesen Menüs eine ähnliche Funktionalität wie Akkordeon bieten. Wie wenn ich einen Menüpunkt wähle, dann werden seine Kindermenüs sichtbar (slideDown Animation) und das Kindermenü des aktiven Elternmenüs wird ausgeblendet (slideUp Animation). Zusätzlich zu dieser Funktionalität ist das ausgewählte Menü immer oben und andere Menüs werden darunter liegen.

Unten ist das Code-Snippet für das gleiche:

$(document).ready(function(){ 
 
$('.dropdown').find('li:eq(0)').addClass('active'); 
 
    $('.dropdown').find('[data-id="parentmenu"]').each(function() { 
 
     if ($(this).hasClass('active') == false) { 
 
      $(this).find('ul').slideUp(10); 
 
     } 
 
    }); 
 
    $('ul.dropdown').on('click', '[data-id="parentmenu"]', function() { 
 
     $(this).siblings('[data-id="parentmenu"]').removeClass('active'); 
 
     $(this).siblings('[data-id="parentmenu"]').each(function() { 
 
      $(this).find('ul').slideUp(500); 
 
     }); 
 
     $(this).addClass('active'); 
 
     $(this).find('ul').show().slideDown(500); 
 
     $markupHTML = "<li data-id='parentmenu'>" + $(this).html() + "</li>"; 
 
     $($markupHTML).insertBefore($('.dropdown').find('li:eq(0)')); 
 
     $(this).remove(); 
 
    }); 
 

 
});

ul.dropdown { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.dropdown { 
 
    font-size: 14px; 
 
    height: 20px; 
 
    width: 203px; 
 
} 
 
ul.dropdown li a { 
 
    color: #7f7f7f; 
 
    display: block; 
 
    font-size: 13px; 
 
    font-weight: bold; 
 
    padding-bottom: 7px; 
 
    text-decoration: none; 
 
} 
 
ul.dropdown li { 
 
    border-bottom: 2px solid #91a6ca; 
 
    list-style: outside none none; 
 
    margin-bottom: 7px; 
 
} 
 
#left_panel { 
 
    background-color: #fff; 
 
    float: left; 
 
    min-height: 700px; 
 
    min-width: 230px; 
 
    padding: 15px 3px; 
 
    width: 12%; 
 
} 
 
.ui-resizable { 
 
    position: relative; 
 
} 
 
.vdr-left-nav { 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="vdr-left-nav ui-resizable" id="left_panel"> 
 
<ul class="dropdown"> 
 
    <li data-id="parentmenu" class="active"> 
 
     <a title="" href="#" class="snacks"> Menu 1</a> 
 
     <ul> 
 
      <li data-id="childmenu"> <a href="#">Child Menu 1</a></li> 
 
      <li data-id="childmenu"> <a href="#">Child Menu 2</a></li> 
 
     </ul> 
 
    </li> 
 
    <li data-id="parentmenu"> 
 
     <a title="" href="#" class="snacks"> Menu 2</a> 
 
     <ul > 
 
      <li data-id="childmenu"><a href="#">Child Menu 3</a></li> 
 
      <li data-id="childmenu"><a href="#">Child Menu 4</a></li> 
 
     </ul> 
 
    </li> 
 
    <li data-id="parentmenu"> 
 
     <a title="" href="#" class="snacks"> Menu 3</a> 
 
     <ul > 
 
      <li data-id="childmenu"><a href="#">Child Menu 5</a></li> 
 
      <li data-id="childmenu"><a href="#">Child Menu 6</a></li> 
 
     </ul> 
 
    </li> 
 
</ul> 
 
</div>

Der Code fast arbeitet außer richtig, dass ich nicht die slideDown Animation bekommen konnte für das oberste ausgewählte Menü zu arbeiten Artikel. Das ausgewählte Menü wird nur angezeigt und die Animation funktioniert überhaupt nicht.

Auch mit $(this).find('ul').slideDown(500).show(); versucht, aber das funktioniert auch nicht. Was mache ich falsch?

Jede Hilfe wird geschätzt.

Hier ist ein Fiddle für die gleiche auch.

Answer 1

Ich denke, Ihr Code ist in Ordnung, aber ein kleiner Fehler vor slideDown() gefunden, um show() aufzurufen und neuen li-Element-Inhalt anhängen, so müssen Sie das erste Element Folie nach oben nach unten anzeigen.

$(document).ready(function(){ 
$('.dropdown').find('li:eq(0)').addClass('active'); 
    $('.dropdown').find('[data-id="parentmenu"]').each(function() { 
     if ($(this).hasClass('active') == false) { 
      $(this).find('ul').slideUp(10); 
     } 
    }); 
    $('ul.dropdown').on('click', '[data-id="parentmenu"]', function() { 
     $(this).siblings('[data-id="parentmenu"]').removeClass('active'); 
     $(this).siblings('[data-id="parentmenu"]').each(function() { 
      $(this).find('ul').slideUp(500); 
     }); 
     $(this).addClass('active'); 
     //$(this).find('ul').show().slideDown(500); 

     $markupHTML = "<li data-id='parentmenu'>" + $(this).html() + "</li>"; 
     $($markupHTML).insertBefore($('.dropdown').find('li:eq(0)')); 
     $(this).remove(); 
     $('.dropdown').find('li:eq(0)').find('ul').slideDown(500); 
    }); 

}); 

https://jsfiddle.net/w0d8sdvo/3/

Answer 2

Ich würde vermuten, das $ MarkupHTML-Rewriting ist ein wahrscheinlicher Kandidat für Ihre Animation nicht zu funktionieren .. wie es DOM-Elemente erstellen/umschreiben.

Als eine Randnotiz, finde ich die Reihenfolge der Menüpunkte aus UX-Perspektive um schlechte Usability bewegen.