前端插件之带滑动效果的二级标题，原生js写的

来源：互联网发布：java 获取整数的位数编辑：程序博客网时间：2024/06/15 16:33

效果图：

1.最主要的js部分

<script>var wid = window.screen.width;var subcontent = document.getElementById("subcontent");subcontent.style.width = (wid - 40) + 'px';</script><script type="text/javascript">//全局变量声明var a = false;var subcontent = document.getElementById("subcontent");//给li里的span赋予不同的颜色，内容var colors = new Array("#d40045 ", "#ee0026", "#ff590b", "#ff7f00", "#ffcc00", "#ffe600 ","#99cf15 ", "#66b82b", "#007a87 ", "#055D87", "#093f86 ", "#281285 ", "#340c81 ", "#56007d ","#f9344c ", "#99d02b ", "#1d86ae ", "#6964ad ", "#a45aaa ", "#cce708");var txt = [{department: "大数据",persons: ["张大", "周二是", "谭五", "赵三"]},{department: "综合管理部",persons: ["李四", "老六哦"]},{department: "媒体平台部",persons: ["自己的", "哦哈哟"]},{department: "空无一人部",persons: []}];subcontent.innerHTML = "";var content = "";for(var i = 0; i < txt.length; i++) {(function(index) {var id = "sub_menu_" + index;content += "<div onclick=f('sub_menu_" + index + "') class='sub_item'>";if(txt[index].persons.length > 0) {content += "<p class='iconurl'>" + txt[index].department + "</p>";content += "<ul id='" + id + "' class='ccc'> ";for(var j = 0; j < txt[index].persons.length; j++) {var bg = colors[Math.round(Math.random() * 20)];var spantxt = txt[index].persons[j].substring(0, 1);content += "<li><span style='background:" + bg + "'>" + spantxt + "</span>" + txt[index].persons[j] + "</li>";}content += "</ul>";}else{content += "<p class=''>" + txt[index].department + "</p>";}content += "</div>";})(i)}subcontent.innerHTML = content;//给有二级标题的ul先赋予高度，再用类sctive隐藏var adiv = subcontent.getElementsByTagName("div");//alert(adiv.length)for(var i = 0; i < adiv.length; i++) {(function(index) {var ul = adiv[index].getElementsByTagName("ul")[0];if(ul) {var ali = ul.getElementsByTagName("li");ul.style.height = (ali.length) * 30 + 'px';ul.classList.add("active");}})(i)}//点击一级标题触发的事件function f(str) {//console.log(str)var sub_menu = document.getElementById(str);var parent = sub_menu.parentNode;var icon = parent.getElementsByTagName("p")[0];if(a) {sub_menu.classList.add("active");icon.style.backgroundImage = "url(img/icon_right.png)";a = false;} else {sub_menu.classList.remove("active");icon.style.backgroundImage = "url(img/icon_bottom.png)";a = true;}};</script>

2.html部分：

3.css部分：

<style type="text/css">* {margin: 0;padding: 0;box-sizing: border-box;text-decoration: none;list-style: none}body {background: #EEEEEE;}#subcontent {margin-left: 20px;background: #FFFFFF;height: auto;}#subcontent .sub_item {width: 100%;line-height: 40px;text-align: left;}#subcontent .sub_item p {height: 40px;padding-left: 25px;background: left center no-repeat;background-size: 20px;background-color: #0093DD;border: 1px solid #FFFFFF;}#subcontent .sub_item p.iconurl{background-image: url(img/icon_right.png);}#subcontent li {height: 30px;line-height: 30px;padding-left: 25px;overflow: hidden;}#subcontent li span {width: 24px;height: 24px;border-radius: 12px;display: block;float: left;margin-top: 3px;margin-right: 5px;line-height: 24px;color: #FFFFFF;text-align: center;}.ccc {overflow: hidden;transition: all ease 0.5s;}.active {height: 0 !important;}</style>

4.最后再加一个：

阅读全文

0 0