jQuery实现下拉菜单动态添加数据 点击滑出 收起其他功能

上面的人想让hui admin做页面。我在前端比较菜品，这个框架从来没有用过。

因为数据是动态添加的，没有表格，那么子菜单列表只能通过字符串拼接显示。

(伪造的)数据来自发现这个框架的点击菜单。无法触发子菜单的滑出效果。它应该被封装.反正不会引用。我自己写了一个点击事件(，列表格式或者参考模板)。

:请求数据ul拼接

粗糙，两侧图标无力，但功能实现了

$.Ajax({ URL : '/type/report type }，data : { ' token ' : getcookie(' token ')}，type:'post '，success : function(data){ var report types=data . report types；$.每个(reportTypes，function(n，value){ var str=' dl \ n ' ' dt id=' value . id ' ' onclick=' zclick(this)' I class=\ ' hui-icon font \ '/i ' value . rtname ' I class=\ ' hui-icon font menu_dropdown-arrow\'/i/dt\n' ' DD \ n ' ' ul \ n '；var configs=value.configs$.每个(configs，function(n，value)){//alert(value . rcname)；str=' lia data-href=\ ' admin-list . html？id=' value . id ' \ ' data-title=\ ' value . rcname ' \ ' href=\ ' JavaScript : void(0)\ ' value . rcname '/a/Li \ n '；});str='/ul \ n ' '/DD ' '/dl '；$('#ss ')。追加(字符串)；});} })//定义判断条件，true弹出，false折叠var b=true函数zclick(obj){ //获取dt对象var id=obj . id；//id //获取大节点dl下的dt兄弟对象- dd(具体的滑动折叠对象var dd=$('#' id)。next()；//获取数组var others=dd.parent()。其他dl对象的同级()；//遍历每个dl下的ddfor(var I=0；长度；I ){ //因为我得到的dd是数组，所以我只有一个[0]。varztb=其他[我]。getelementsbyname(' dt ')[0]；//不能直接使用ztb.next()来获取dd，只能使用标准写法ztb=$('#' ztb.id)。next()；//获取dd style style (none/block)的display属性vardisplay=ztb . CSS(' display ')；If(display=='block'){ //alert('它是打开的！');b=真；打破；} }//弹出列表，关闭其他兄弟列表，如果(b){ DD . slide down()；var bb=dd.parent()。兄弟姐妹()；for(var I=0；ibb.lengthi ){ var pdd=bb[i]。getElementsByTagName(' dt ')[0]；var pdd=$('#' pdd.id)。next()；PDD . slide up()；} b=假；}//fold else { DD . slide up()；b=真；}}摘要

以上是边肖介绍的jQuery实现下拉菜单，动态添加数据，点击滑出，关闭其他功能，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！