<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.boss {
width: 300px;
height: 600px;
border: 3px solid skyblue;
}
.box1 {
width: 295px;
border: 3px solid skyblue;
}
.box2 {
width: 295px;
border: 3px solid skyblue;
}
.an1 {
position: relative;
left: 80%;
top: -20%;
}
.an2 {
position: relative;
left: 80%;
top: -20%;
}
.boss2 {
width: 300px;
height: 600px;
border: 3px solid aqua;
position: absolute;
left: 20%;
top: 0;
}
li{
display: none;
}
.u1{
width: 100%;
height: ;
}
.u2{
width: 100%;
height: ;
}
</style>
</head>
<body>
<div class="boss">
<div class="box1">
<div class="u1" οnclick="func1()">分组first</div>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<button type="button" οnclick="func3()" class="an1">+</button>
</div>
<div class="box2">
<ul>
<div class="u2" οnclick="func2()">分组second</div>
<li>5</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<button type="button" οnclick="func4()" class="an2">+</button>
</div>
</div>
<div class="boss2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>2</li>
<li>3</li>
<li>4</li>
</div>
</body>
<script type="text/javascript">
var u1 = document.querySelector(".u1");
var u2 = document.querySelector(".u2");
var li1 = document.querySelectorAll(".box1 li");
var li2 = document.querySelectorAll(".box2 li");
var bosli = document.querySelectorAll(".boss2 li");
var num=1;
var numm=1;
function func1(){
if(num==1){
for(let i = 0;i<li1.length;i++){
li1[i].style.display="block";
num=2;
}
}else if(num==2){
for(let i = 0;i<li1.length;i++){
li1[i].style.display="none";
num=1;
}
}
}
function func2(){
if(numm==1){
for(let i = 0;i<li2.length;i++){
li2[i].style.display="block";
numm=2;
}
}else if(numm==2){
for(let i = 0;i<li2.length;i++){
li2[i].style.display="none";
numm=1;
}
}
}
for(let i=0 ;i<4;i++){
li1[i].οnclick=function(){
bosli[i].style.display="block";
}
li2[i].οnclick=function(){
bosli[i+4].style.display="block";
}
}
for(let b=0;b<bosli.length;b++){
bosli[b].οnclick=function(){
bosli[b].style.display="none";
}
}
function func3(){
for(let i=0 ;i<4;i++){
bosli[i].style.display="block";
}
}
function func4(){
for(let i=0 ;i<4;i++){
bosli[i+4].style.display="block";
}
}
</script>
</html>