上面的人想让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/dtn' ' 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实现下拉菜单,动态添加数据,点击滑出,关闭其他功能,希望对大家有所帮助。如果你有任何问题,请给我留言,边肖会及时回复你。非常感谢您对我们网站的支持!