jquery 下拉菜单 动态添加数据 点击滑出收起其他

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

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

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

①:请求数据+ul拼接 

    比较糙,两边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\">&#xe616;</i> "+value.rtName+
                      "<i class=\"Hui-iconfont menu_dropdown-arrow\">&#xe6d5;</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;}
  }

猜你喜欢

转载自blog.csdn.net/qq_39358952/article/details/80681111