折叠菜单页

Question

我在网上看到一个网站有一个可折叠的侧边菜单

倒塌的菜单

扩展菜单

请帮帮我，我真的需要帮助。在我看来，错误是在js代码。有一个代码(当图标被点击并在悬停时展开时，应该在侧面折叠成一列)

<style type="text/css">
* {
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
}

ul {
background: #afafaf;
display: inline-block;
width: 420px;
border-right: 1px solid #000;
}

ul li {
padding: 6px 0;
background: #fff;
display: inline-flex;
align-items: center;
justify-content: space-between;
}

ul li:hover {
background: lightgreen;
}

ul li a {
color: #000;
}

ul li:hover a,
ul li:hover .fa {
color: #fff;
}

ul li .fa {
display: inline-block;
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
}

.leftside {
margin-left: 16px;
display: inline-block;
width: 30px;
height: 30px;
display: inline-flex;
}

.rightside {
margin-right: 16px;
visibility: hidden;
width: 30px;
height: 30px;
display: inline-flex;
}

.centerplace {
width: 328px;
display: inline-flex;
align-items: center;
justify-content: space-between;
}

.nestedblock {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="testsite.js">
let elemmenuitemli = document.querySelectorAll('.fa');
let sidemenu = document.querySelector('#sidemenu');
elemmenuitemli.addEventListener("onmouseenter", checkitem);
elemmenuitemli.addEventListener("onmouseleave", checkitem);

function checkitem() {
if sidemenu.classList.contains("active") {
/* Удаление меню ul*/
sidemenu.delete();
/* Сворачивание меню ul */
<
ul id = "sidemenu" >
<
li >
<
div class = "leftside" >
<
i class = "fa fa-home" > < /i> <
/div> <
/li> <
li >
<
div class = "leftside" >
<
i class = "fa fa-home" > < /i> <
/div> <
/li> <
li >
<
div class = "leftside" >
<
i class = "fa fa-home" > < /i> <
/div> <
/li> <
li >
<
div class = "leftside" >
<
i class = "fa fa-home" > < /i> <
/div> <
/li> <
/li> <
/ul>
}
else {
/* Удаление меню ul*/
sidemenu.delete(); <
ul id = "sidemenu" >
<
li >
<
div class = "leftside" >
<
i class = "fa fa-home" > < /i> <
/div> <
div class = "centerplace" >
<
a href = ""
class = "nestedblock" > Техника для кухни < /a> <
/div> <
div class = "rightside" >
<
i class = "fa fa-home" > < /i> <
/div> <
/li> <
li >
<
div class = "leftside" >
<
i class = "fa fa-home" > < /i> <
/div> <
div class = "centerplace" >
<
a href = ""
class = "nestedblock" > Бытовая техника для дома < /a> <
/div> <
div class = "rightside" >
<
i class = "fa fa-home" > < /i> <
/div> <
/li> <
li >
<
div class = "leftside" >
<
i class = "fa fa-home" > < /i> <
/div> <
div class = "centerplace" >
<
a href = ""
class = "nestedblock" > Ноутбуки и компьютеры < /a> <
/div> <
div class = "rightside" >
<
i class = "fa fa-home" > < /i> <
/div>     <
/li> <
li >
<
div class = "leftside" >
<
i class = "fa fa-home" > < /i> <
/div> <
div class = "centerplace" >
<
a href = ""
class = "nestedblock" > Комплектующие < /a> <
/div> <
div class = "rightside" >
<
i class = "fa fa-home" > < /i> <
/div>     <
/li> <
/li> <
/ul>
sidemenu.classList.add('active');
/* Разворачивание меню ul */
}
}
</script>
<ul id="sidemenu">
<li>
<div class="leftside">
<i class="fa fa-home"></i>
</div>
<div class="centerplace">
<a href="" class="nestedblock">Техника для кухни</a>
</div>
<div class="rightside">
<i class="fa fa-home"></i>
</div>
</li>
<li>
<div class="leftside">
<i class="fa fa-home"></i>
</div>
<div class="centerplace">
<a href="" class="nestedblock">Бытовая техника для дома</a>
</div>
<div class="rightside">
<i class="fa fa-home"></i>
</div>
</li>
<li>
<div class="leftside">
<i class="fa fa-home"></i>
</div>
<div class="centerplace">
<a href="" class="nestedblock">Ноутбуки и компьютеры</a>
</div>
<div class="rightside">
<i class="fa fa-home"></i>
</div>
</li>
<li>
<div class="leftside">
<i class="fa fa-home"></i>
</div>
<div class="centerplace">
<a href="" class="nestedblock">Комплектующие</a>
</div>
<div class="rightside">
<i class="fa fa-home"></i>
</div>
</li>
</li>
</ul>

为什么不按上面的方式工作?

注:我不太懂英语，所以我会问:你听懂了吗?

Answer 1

如果你想只在鼠标悬停在图标上时看到标签，你可以在css中使用display:none隐藏标签。您也可以使用visibility :hidden，但它不会隐藏标签的空白从图标