<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/index.css">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.14.0/css/all.css" rel="stylesheet">
<title>Document</title>
<style>
html body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
a {
text-decoration: none;
font-weight: bold;
font-size: 18px;
color: #999;
}
div.jg {
width: 100%;
height: 100%;
overflow: hidden;
}
.top_wrapper {
width: 100%;
height: 100px;
background-color: #393D49;
color: white;
margin-top: 0px;
line-height: 100px;
overflow: hidden;
}
.head {
margin-left: 80px;
display: flex;
}
.head a {
text-decoration: none;
color: white;
}
.title {
flex-basis: 90%;
font-size: 40px
}
.icons {
width: 20px;
font-size: 20px;
margin-top: 34px;
margin-right: 5px;
color: white;
}
.head a {
font-size: 16px;
display: block;
margin-top: 35px;
}
ul.head>li>a:hover {
color: red;
}
.io {
width: 80px;
}
.out {
width: 40px;
}
.nav_left {
width: 196px;
position: absolute;
top: 100px;
bottom: 0px;
left: 0px;
background-color: #393D49;
font-size: 16px;
border-left: solid 2px #a0a0a0;
border-right: solid 2px #a0a0a0;
border-bottom: solid 2px #a0a0a0;
}
.nav_left ul li{
overflow: hidden;
}
div.nav_left ul.main_menu li.menulist span.menutitle{
font-size: 18px;
display: block;
line-height: 40px;
overflow: hidden;
padding-left: 15px;
font-weight: bold;
color: #999;
cursor: pointer;
}
span.menutitle:hover{
background-color: rgb(99, 96, 96);
}
div.nav_left ul.main_menu a {
display: block;
height: 30px;
padding-left: 15px;
margin-top: 15px;
}
.ue a {
margin-left: 20px;
line-height: 30px;
}
.jp a {
line-height: 30px;
margin-left: 20px;
}
.nav_left .main_menu .sub-menu {
margin-top: -20px;
display: none;
}
div.jg a:hover {
color: white;
}
</style>
</head>
<body>
<div class="jg">
<div class="top_wrapper">
<ul class="head">
<li class="title">
<h1 class="title">title</h1>
</li>
<li class="icons"><i class="fas fa-user-alt"></i></li>
<li class="io">
<a href="#">1</a>
</li>
<li class="out">
<a href="#">2</a>
</li>
</ul>
</div>
<div class="nav_left">
<ul class="main_menu">
<li class="explanation">
<a href="#">1</a>
</li>
<li class="oe">
<a href="#">2</a>
</li>
<li class="ue menulist" data-open="none">
<span class="menutitle">title1<i class="fas fa-caret-right"></i></span>
<ul class="sub-menu">
<li class="uo">
<a href="#">1</a>
</li>
<li user_account>
<a href="#">2</a>
</li>
<li class="un">
<a href="#">3</a>
</li>
</ul>
</li>
<li class="jp menulist" data-open="none">
<span class="menutitle">title2<i class="fas fa-caret-right"></i></span>
<ul class="sub-menu">
<li class="me">
<a href="#">1</a>
</li>
<li class="we">
<a href="#">2</a>
</li>
<li class="dn">
<a href="#">3</a>
</li>
</ul>
</li>
<li class="sy">
<a href="#">4</a>
</li>
</ul>
</div>
</div>
<script>
var menus = document.querySelectorAll('.main_menu>li>span');
for (var i = 0; i < menus.length; i++) {
//为四个元素绑定点击事件
menus[i].addEventListener('click', function () {
if (this.dataset.open == 'none') {
this.dataset.open = 'block';
} else {
this.dataset.open = 'none';
}
//获取当前元素下的子节点<ul class='sub-menu'>并设置显示方式
this.nextSibling.nextSibling.style.display = this.dataset.open;
})
}
</script>
</body>
</html>
为什么页面刷新后，二级菜单需要点击两次才能展开
