動態生成菜單的動畫無法正常工作

Question

我有一個左側菜單，它有多個父菜單，並且在其下面有一些子菜單。我想爲這些菜單提供類似於手風琴的功能。就像如果我選擇一個菜單項目，那麼它的子菜單將變得可見（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之前發現了一些小錯誤調用展（）和追加新的鋰元素內容，因此你需要顯示第一個元素滑下後加頂。

$(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的角度移動的順序。