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

淩亂°似流年 2022-06-09 13:29 139阅读 0赞

效果图：![20170906195041436][]

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 οnclick=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部分：

<div id="subcontent"></div>

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.最后再加一个：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

[20170906195041436]: /images/20220609/7e113d68c6ca4be5b028e86f7d5da37b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，139人围观）

还没有评论，来说两句吧...

相关阅读

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

效果图：![20170906195041436][] 1.最主要的js部分 <script> var wid = window.screen.w

淩亂°似流年/ 2022年06月09日 13:29/ 0 赞/ 140 阅读

相关前端插件之原生js写range组件

效果图：![20170903173542777][] 我们先写一个range组件：<input type="range" max="12" min="0" value="6"

曾经终败给现在/ 2022年06月09日 10:21/ 0 赞/ 384 阅读

相关前端插件之头部tab栏左右滑动

效果图： ![20170901133831094][] 1.css部分 <meta name="viewport" content="width=devic

Love The Way You Lie/ 2022年06月08日 20:45/ 0 赞/ 413 阅读

相关一些滑动效果插件的官方手册网站

1、swiper.js: [http://www.swiper.com.cn/api/callbacks/2014/1217/91.html][http_www.swipe

迈不过友情╰/ 2022年06月04日 09:17/ 0 赞/ 193 阅读

相关原生JavaScript实现前端翻页插件

之前做项目有遇到需要使用翻页插件，公司原来使用的是基于jQuery和bootstrap扩展的插件，依赖较多，后来自己就尝试着用原生的JS实现插件效果，由于技术水平有限，花了一天

本是古典何须时尚/ 2022年05月31日 02:35/ 0 赞/ 363 阅读

相关原生js编写插件

作为一个前端er，如果不会写一个小插件，都不好意思说自己是混前端界的。写还不能依赖jquery之类的工具库，否则装得不够高端。那么，如何才能装起来让自己看起来逼格更高呢？当然是

Bertha 。/ 2022年05月27日 00:48/ 0 赞/ 311 阅读

相关 mobiscroll插件滑动时间选择效果

![70][] 此插件的特点是可以适用于手机端滑动选择时间，类似于原生插件下载地址 [https://download.csdn.net/download/lianzha

末蓝、/ 2022年05月23日 10:26/ 0 赞/ 285 阅读

相关前端插件iscroll.js的使用

参考：[https://www.cnblogs.com/starof/p/5215845.html][https_www.cnblogs.com_starof_p_521584

ゞ浴缸里的玫瑰/ 2022年01月23日 06:21/ 0 赞/ 226 阅读

相关原生JS返回顶部，带返回效果

有些网站当滑到一定高度时右下角会有一个按钮，你只要一点就可以直接返回顶部了。那这个功能是怎么做到的呢。其实不算太难；首先我们先在网页中创建一个按钮，上面写上返回顶部，把它的

秒速五厘米/ 2021年10月01日 02:02/ 0 赞/ 364 阅读

相关如何用原生js写一个懒加载页面带渐变效果

> 懒加载经常是我们性能优化经常使用的方案，那么我们今天就实现一波。 <!DOCTYPE html> <html lang="en"> <h

太过爱你忘了你带给我的痛/ 2021年08月26日 17:36/ 0 赞/ 271 阅读