Jquery 使用数据库动态填充导航菜单

我目前正在从头开始建立一个网络商店。这个网络商店将包含数百种与我工作的公司相关的不同类型的产品

我目前正在使用“过滤器”菜单，用户可以单击不同的类别来过滤显示给他们的产品列表。由于用户可以选择数百种不同的类别，因此我使用数据库动态加载此列表。包含此信息的表有3列。类别ID、名称和父ID

我的问题是，我找不到一个好方法将其转换为多级导航菜单。最终结果将是嵌套的ul，允许用户单击父li以滑动切换隐藏的ul。点击含有“蔬菜”的li将滑动切换含有li的胡萝卜和芹菜的ul

这里是导航菜单的jsfiddle，我想不出一个好方法来动态填充ul和li

HTML

水果

苹果

蔬菜

二等儿童胡萝卜

骰子
Julienned

西芹

骰子
Julienned


零食