動的に生成されたメニューのアニメーションが正しく動作しない

Question

私は1つの左側メニューを持っています。これには複数の親メニューがあり、その下に特定の子メニューがあります。私は、これらのメニューにアコーディオンに似た機能を提供したいと思います。 1つのメニュー項目を選択すると、その子メニューが表示され（slideDownアニメーション）、アクティブな親メニューの子メニューが非表示になります（slideUpアニメーション）。この機能に加えて、選択したメニューは常に上に表示され、他のメニューが下に表示されます。以下は

同じのためのコードスニペットです：

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

コードは、ほとんど私が一番上の選択したメニューのために働くslideDownアニメーションを得ることができなかったことを除いて、正常に動作しています項目。選択したメニューが表示され、アニメーションはまったく機能しません。

$(this).find('ul').slideDown(500).show();でも試しましたが、これも機能しません。私は間違って何をしていますか？

ご協力いただければ幸いです。

同じものもFiddleです。

Answer 1

あなたのコードは大丈夫だと思うが、slideDown（）の前にいくつか小さな間違いがあり、show（）を呼び出して新しいli要素のコンテンツを追加すると、最初の要素のスライドを表示する必要があります。

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

$ markupHTMLの書き換えは、DOM要素を作成したり書き換えたりしているため、アニメーションがうまくいかない可能性が高いと思われます。

私はメニュー項目の順番が、UXの観点から見れば使い勝手が悪いと考えています。