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


Posted in jQuery onJune 14, 2018

上面的人要hui admin  做页面,本人前端比较菜,这框架也没用过.

因为是动态添加数据 .表也没有,..然后子菜单列表只能通过字符串拼接的方式显示.

  (伪造的)数据是传过来了 发现这个框架的点击菜单,子菜单滑出的效果触发不了,应该是封装了吧..反正不会引用.就自己写了个点击事件(,列表格式还是参照模板).

①:请求数据+ul拼接

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

    比较糙,两边icon 无力回天,不过功能是实现了

$.ajax({
     url:'/type/reportType',
     data:{"token":getCookie("token")},
     type:'post',
     success:function (data) {
       var reportTypes=data.reportTypes;
       $.each(reportTypes,function(n,value) {
         var str="<dl>\n"+
           "<dt id='"+value.id+"'  onclick='zclick(this)'><i class=\"Hui-iconfont\"></i> "+value.rtName+
           "<i class=\"Hui-iconfont menu_dropdown-arrow\"></i></dt>\n" +
           "          <dd >\n" +
           "          <ul>\n" ;
         var configs=value.configs;
         $.each(configs,function(n,value) {
           // alert(value.rcName);
           str+= " <li><a 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").append(str);
       });
     }
   })
 //定义判断条件 ,true 弹出,false 收起
 var b=true;
 function zclick(obj){
                   //获取 dt对象
var id=obj.id;  //id
                //获取大节点dl下dt同胞对象--dd(具体下滑收起对象
  var dd=$("#"+id).next();
                //获取 其他dl对象的数组
   var others= dd.parent().siblings();
                //遍历每个dl下的dd
   for(var i=0;i<others.length;i++){
               //因为得到的dd是是个数组,我这只有一个就[0]了
     var ztb= others[i].getElementsByTagName("dt")[0];
              //  获取dd   不能直接用ztb.next(),只能用标准写法
     ztb=$("#"+ztb.id).next();
              //获取 dd style样式的 display属性(none/block)
      var display=ztb.css("display");
  if(display=='block'){
  //  alert("有打开的了!");
      b=true;
      break;
  }
   }
    //弹出列表,并关闭其他兄弟列表
    if(b){
      dd.slideDown();
     var bb=dd.parent().siblings();
      for(var i=0;i<bb.length;i++){
      var pdd= bb[i].getElementsByTagName("dt")[0];
      var pdd=$("#"+pdd.id).next();
       pdd.slideUp();
  }
      b=false;
 }
 //收起
    else{
    dd.slideUp();
    b=true;}
 }

总结

以上所述是小编给大家介绍的jQuery实现下拉菜单动态添加数据点击滑出收起其他功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery Tree Multiselect使用详解
May 02 jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 #jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 #jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 #jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 #jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 #jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 #jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 #jQuery
You might like
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
php中几种常见安全设置详解
2010/04/06 PHP
php动态函数调用方法
2015/05/21 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
PHP 文件上传限制问题
2019/09/01 PHP
点击文章内容处弹出页面代码
2009/10/01 Javascript
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
javascript克隆对象深度介绍
2012/11/20 Javascript
jQuery中element选择器用法实例
2014/12/29 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
Vue自定义指令介绍(2)
2016/12/08 Javascript
详解Puppeteer 入门教程
2018/05/09 Javascript
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
Python实现的购物车功能示例
2018/02/11 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
opencv与numpy的图像基本操作
2019/03/08 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
如何在python中判断变量的类型
2020/07/29 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
什么是.net的Remoting技术
2016/07/08 面试题
高分子材料与工程专业个人求职信
2013/12/15 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
出差报告格式模板
2014/11/06 职场文书
纪委立案决定书
2015/06/24 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书