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实现web页面樱花坠落的特效
Jun 01 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
JQuery表单元素取值赋值方法总结
May 12 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 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
强烈推荐:php.ini中文版(1)
2006/10/09 PHP
php操作JSON格式数据的实现代码
2011/12/24 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
2016/01/04 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
微信小程序methods中定义的方法互相调用的实例代码
2018/08/07 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
[01:01:36]Optic vs paiN 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python中操作文件之write()方法的使用教程
2015/05/25 Python
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2016/03/30 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
windows环境中利用celery实现简单任务队列过程解析
2019/11/29 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
教育科研先进个人材料
2014/01/26 职场文书
教师试用期自我鉴定
2014/02/12 职场文书
诚信承诺书范文
2014/03/27 职场文书
企业领导对照检查材料
2014/08/20 职场文书
2014年保洁工作总结
2014/11/24 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
导游词之河北邯郸
2019/09/12 职场文书
MySQL的join buffer原理
2021/04/29 MySQL
python调试工具Birdseye的使用教程
2021/05/25 Python
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技