组织树底部弹出选择（仿京东收货地址地区选择）

最新推荐文章于 2024-12-14 13:01:25 发布

xie123aaa

最新推荐文章于 2024-12-14 13:01:25 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.youkuaiyun.com/xie123aaa/article/details/81334469

版权

这个示例展示了如何创建一个模仿京东收货地址选择的底部弹出组件。利用JavaScript和jQuery，结合CSS实现动画效果和交互。组织树数据通过AJAX获取，用户点击选择项时，会动态更新头部导航和列表内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

   <body>
       <div id="btn" style="width: 300px; height: 40px; background-color: #88D8FF;">请点击</div>
       <div id="d" class="b fadeOutDownBig animated">
           <div class="title">选择项目</div>
           <div class="header">
               <ul class="hul"></ul>
           </div>
           <div class="list">
               <ul class="ulList"></ul>
           </div>
       </div>
       <script>
           $(function() {
               $("#btn").click(function() {
                   $("#d").removeClass("fadeOutDownBig").removeClass("b");
                   $("#d").addClass("a");
                   $("#d").addClass("fadeInUpBig");
               });

               $("#btn2").click(function() {
                   $("#d").removeClass("fadeInUpBig");
                   $("#d").addClass("fadeOutDownBig");
               });
               // 获取组织树请求
               var orgTree = {};
               var params = {};
               var hid = ''; // 顶层组织id
               params.orgId = 1;
               $.ajax({
                   url: "http://10.1.252.73:8099/bookorg/org",
                   type: "get",
                   xhrFields: {
                       withCredentials: true
                   },
                   crossDomain: true,
                   data: params,
                   dataType: 'json',
                   async: false,
                   success: function(data) {
                       console.log(data);
                       orgTree = data.data;
                       hid = orgTree.id;
                       // 头部导航
                       $(".hul").append(
                           '<li class="cur" hid="' + orgTree.id + '">' + orgTree.orgName + '</li>'
                       );
                       // 列表组织
                       orgTree.nodes.forEach(function(item, index) {
                           $(".ulList").append(
                               '<li class="treeLi" tid="' + item.id + '">' + item.orgName + '</li>'
                           );
                       });
                   }
               });
               // 获取组织树请求尾部
               function asd(tree, id) { // 递归操作，若有子节点继续往下查找，直到最底层
                   var obj = null;
                   tree.forEach(
                       function(item, index) {
                           if(item.id == id) {
                               obj = item;

                           } else {
                               if(item.nodes.length > 0 && !obj) {
                                   obj = asd(item.nodes, id);
                               }
                           }
                       }
                   );
                   return obj;
               };
               // 点击列表
               $("body").on("click", ".ulList li", function() {
                   var pid = $(this).attr("tid");
                   pname = $(this).text();
                   var bottomNodes = asd(orgTree.nodes, pid);
                   if(bottomNodes.nodes.length > 0) {
                       $(".ulList").empty();

                       bottomNodes.nodes.forEach(function(item, index) {
                           $(".ulList").append(
                               '<li class="treeLi" tid="' + item.id + '">' + item.orgName + '</li>'
                           );
                       });
                       // 头部增加一个选中项
                       $(".hul").append(
                           '<li class="cur" hid="' + pid + '">' + pname + '</li>'
                       );

                       // 头部当前列表对应的父级的兄弟元素清除选中样式
                       $("li[hid=" + pid + "]").siblings().removeClass("cur");
                   } else {
                       $("#d").removeClass("fadeInUpBig");
                       $("#d").addClass("fadeOutDownBig");
                       $("#btn").text(pname);
                       $("#btn").attr("oid", pid);
                       console.log(pid);
                       console.log(pname);
                   }
               });
               // 点击头部
               $("body").on("click", ".hul li", function() {
                   $(this).nextAll().remove(); // 当前点击的li后面的li删除
                   $(this).addClass("cur").siblings().removeClass("cur");

               });
           })
       </script>
   </body>

</html>

cs3.css 样式

.b {
display: none;
}

.a {
   display: block;
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 70%;
   z-index: 1000;
   background-color: #fff;
}
.title {
   height: 4rem;
   line-height: 4rem;
   text-align: center;
   color: #999;
}
.header {
   overflow: hidden;
   overflow-x: auto;
}

.hul {
   width: auto;
   height: 40px;
   float: left;
   overflow-y: hidden;
   overflow-x: auto;
   white-space: nowrap;
   background-color: #fff;
}

.hul li {
   width: 100px;
   height: 40px;
   line-height: 40px;
   position: relative;
   text-align: center;
   display: inline-block;
}

.header::-webkit-scrollbar {
display: none;
}

.cur {
   border-bottom: 1px solid #5F97F6;
}
.treeLi {
   line-height: 4rem;
   height: 4rem;
   padding: 0 1rem;
}

common.css样式

* {
-webkit-box-sizing:border-box; /* Safari */
box-sizing: border-box;
padding: 0;
margin: 0;
outline: none;
font-size:1.4rem;
}
/*html{font-size:62.5%;} */
html{font-size:12px;}
body{
   font-size:1.2rem;
   color: #333333;
   background-color: #f1f1f1;
   }
p{font-size:14px;font-size:1.4rem;}
input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
main,
nav,
section,
summary {
display: block;
}
ul, ol {
list-style: none;
}
.left {
float: left;
}
.right {
float: right;
}
.text-left {
text-align: left;
}