wordpress樣式菜單管理器

Question

我正在嘗試使用php和jquery-ui爲我自己的CMS創建一個WordPress樣式菜單管理器。我已經做出了第一步，但我不知道該如何繼續，特別是如何實現菜單項之間的父子關係。我實際的代碼看起來像

<style> 
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } 
#sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; } 
html>body #sortable li { height: 1.5em; line-height: 1.2em; } 
.ui-state-highlight { height: 1.5em; line-height: 1.2em; } 
</style> 
<script> 
$(function() { 
    $("#sortable").sortable({ 
     placeholder: "ui-state-highlight" 
    }); 
    $("#sortable").disableSelection(); 
}); 
</script>  
     <div class="admin_menus"> 
          <ul id="sortable"> 
          <?php foreach($menus as $menu): ?> 
           <?php if(array_key_exists('children', $menu)):?>   
           <li class="ui-state-default"> 
           <?= $menu['name'] ?> 
            <ul class="dropdown-menu_test"> 
            <?php foreach($menu['children'] as $menu_child):?> 
            <li class="ui-state-default" ><?= $menu_child['name'] ?></li> 
            <?php endforeach;?> 

            </ul> 

           </li> 
           <?php else:?> 
           <li class="ui-state-default" ><?= $menu['name'] ?></li> 
           <?php endif;?> 
           <?php endforeach;?>                   
          </ul> 
     </div> 

其中$menus擁有數據庫

Answer 1

取回我的菜單項，你可以使用這個插件來實現你的網站拖動菜單功能 http://dbushell.github.io/Nestable/

它使用簡單，你可以自己定製。