<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body,
html {
height: 100%;
width: 100%;
}
.box {
width: 100%;
height: 100%;
display: flex;
}
.left {
flex: 1;
background-color: #fff;
padding-top: 30px;
}
.right {
flex: 14;
}
iframe {
width: 100%;
height: 100%;
}
.show {
display: block;
}
.hide {
display: none;
}
.left span {
display: block;
width: 100%;
height: 40px;
background-color: #ccc;
}
.menu {
margin-bottom: 5px;
}
.menu ul li {
width: 100%;
height: 40px;
line-height: 40px;
text-indent: 2em;
background-color: #eee;
}
.menu ul li:hover {
background-color: pink;
}
.menu ul .dot {
background-color: purple;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
<ul>
<li class="menu">
<span>一级菜单</span>
<ul class="show">
<li url="http://www.jd.com">二级菜单</li>
<li url="http://www.4399.com">二级菜单</li>
<li url="http://www.taobao.com">二级菜单</li>
<li url="http://www.baidu.com">二级菜单</li>
</ul>
</li>
<li class="menu">
<span>一级菜单</span>
<ul class="hide">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li class="menu">
<span>一级菜单</span>
<ul class="hide">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li class="menu">
<span>一级菜单</span>
<ul class="hide">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
</div>
<div class="right">
<iframe src="http://www.baidu.com" frameborder="0"></iframe>
</div>
</div>
<script>
let spans = document.querySelectorAll('span')
let menus = document.querySelectorAll('.menu>ul')
let lis = document.querySelectorAll('.menu ul li')
let iframe = document.querySelector('iframe')
for (let i = 0; i < spans.length; i++) {
spans[i].onclick = function () {
let className = menus[i].getAttribute('class')
// console.log(className)
if (className === 'show') {
menus[i].setAttribute('class', 'hide')
} else {
menus[i].setAttribute('class', 'show')
}
}
}
for (let i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
for (let j = 0; j < lis.length; j++) {
lis[j].removeAttribute('class', 'dot')
}
iframe.setAttribute('src', lis[i].getAttribute('url'))
this.setAttribute('class', 'dot')
}
}
</script>
</body>
</html>
