列表收缩

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			ul,li{
				list-style: none;
				padding: 0;
				margin: 0;
			}
			ul{
				display: none;
			}
			h3{
				margin: 0;
				background: cornflowerblue;
			}
			div{
				text-indent: 20px;
				width: 200px;
			}
			.active{
				background: coral;
			}
		</style>
	</head>
	<body>
		<div>
			<h3>同学</h3>
			<ul>
				<li>同学1</li>
				<li>同学2</li>
				<li>同学3</li>
			</ul>
		</div>	
		<div>
			<h3>朋友</h3>
			<ul>
				<li>朋友1</li>
				<li>朋友2</li>
				<li>朋友3</li>
				<li>朋友4</li>
			</ul>
		</div>	
		<div>
			<h3>家人</h3>
			<ul>
				<li>父亲</li>
				<li>母亲</li>				
			</ul>
		</div>	
		<script>
			var h = document.getElementsByTagName('h3');
			var ul = document.getElementsByTagName('ul');

			for(var i=0;i<h.length;i++){
				h[i].onclick = function(){
					var current = this.nextElementSibling;
					//console.log(current);
					if(current.style.display == 'block'){
						current.style.display = 'none';
						this.className = '';
					}else{
						for(var j=0;j<ul.length;j++){
						ul[j].style.display = 'none'
                		ul[j].previousElementSibling.className = ''
						}
						current.style.display = 'block';
						this.className = 'active';
					}		
				}
			}
		</script>
	</body>
</html>

因为是点击h3 显示出ul中的所有li的内容，并且颜色会发生改变，且点击一个后，再点击另外一个，除此之外的都要收缩回去

所以

获取h3 和 ul
获取h.length个h的点击事件
nextElementSibling属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）

所以，current是为了获取 h 对应的 ul 元素
进入 if else
if：如果我点击同学，则同学展开，如果我再点击同学，则同学收缩
else 如果我点击同学，则同学展开，如果我点击除同学之外的则遍历 ul，全部收缩，for循环结束，把当前点击的进行展开和变色

代办事项

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>JS待办事项列表添加删除代码 - 站长素材</title>
<style>
	* {
  box-sizing: border-box;
  font-family: sans-serif, Courier, monospace;
}

body {
  margin: 0;
  display: flex;
  justify-content: center;
  background: #303134;
  color: white;
  height: 100vh;
  width: 100%;
}
body h2 {
  font-size: 80px;
  color: #4285f4;
  margin: 60px;
  text-transform: uppercase;
}

.all {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 20px;
  /* now to the list shit */
}
.all .inout {
  display: flex;
  justify-content: center;
  flex-direction: row;
}
.all .inout #text,
.all .inout button {
  padding: 5px 10px;
  height: 50px;
  font-size: 18px;
  border: none;
}
.all .inout #text {
  width: 80%;
  border-radius: 5px 0 0 5px;
}
.all .inout button {
  width: 20%;
  background: #1a73e8;
  border-radius: 0 5px 5px 0;
  color: white;
  cursor: pointer;
}
.all .list ul {
  list-style: none;
  padding: 0;
}
.all .list ul li {
  width: 100%;
  background: white;
  color: #303134;
  margin: 0;
  padding: 20px;
  border: 1px solid #303134;
  border-radius: 5px;
}
.all .list ul li span {
  padding: 10px;
  margin: 5px;
  background: #eee;
  border-radius: 3px;
  color: white;
  display: inline-block;
  float: right;
  margin-top: -10px;
  cursor: pointer;
}
.all .list ul li span.first {
  background: #ffac13;
}
.all .list ul li span.second {
  background: #b11717;
}

</style>
</head>
<body>

<header>
	<h2 class="head">待办事项工具</h2>

	<div class="all">
		<div class="inout">
			<input type="text" name="item" id="text" placeholder="添加您的事项">
			<button>添加</button>
		</div>

		<div class="list">
			<ul>
			</ul>
		</div>
	</div>
</header>
	<script>
		var btn = document.querySelector('button');
		var ul = document.querySelector('ul');
		var text = document.querySelector('input');
		btn.onclick = function(){
			if(text.value == ''){
				alert('请输入待办事项');
			}else{
				var li = document.createElement('li');
				li.innerHTML = text.value + "<span class='fin'> 完成</span>" + "<span class='del'>删除</span>";
				
        ul.insertBefore(li,ul.children[k++]);
        var fin = document.querySelector('.fin');
				var del = document.querySelector('.del');
				del.className = 'second';
				fin.className = 'first';
			
				fin.onclick = function(){
						this.parentNode.style.backgroundColor = 'green';
					}
				del.onclick = function(){
						ul.removeChild(this.parentNode);
				}
			}
		}
	</script>
</body>
</html>

在这里插入图片描述

输入之后，点击添加，下面会显示代办事项，点击完成，显示绿色，点击删除，则删除事项

获取 "添加"的点击事项，获取 input ，因为在ul中显示事项，所以也要获取 ul
获取btn的点击事件，因为要在ul里填li，所以要创造一个元素document.createElement(‘li’)
因为要出现删除和完成，则要用 innerHTML，text.value是为了可以让事项从上往下添加，

li.innerHTML = text.value + "<span class='fin'> 完成</span>" + "<span class='del'>删除</span>";
获取 “完成” 和 “删除” 的元素
设置完成和删除的点击事件，如果完成则变为绿色

this.parentNode.style.backgroundColor = 'green'; parentNode指li的父节点 ul整条变色

ul.removeChild(this.parentNode); 表示删除节点，移出这个ul的父节点即div，移出掉